Se en skeleton-loader bli koda på under ett minutt: - Utrolig gøy å se

Dette er nytt i Next.js 12.3 og Layout RFC, Hyper Fetch, Signals i Preact, SSR vs. CSR og CSS-magi.

Dette var uken for uheldige forkortelser 😬, en ny iPhone 📱og stor overtenning 🐶— og selvfølgelig, dette, da 👑. Og ikke minst, 1270000 ting skjedde i frontend-verdenen!

Forrige uke var en busy uke for Next.js-teamet, som hadde hele tre store ting å melde:

Next.js 12.3 kom ut

Next.js har alltid vært flinke til å slippe hyppige, små oppdateringer, som gjør det stadig enklere å lage raske webopplevelser som rendrer på serveren. Det gjorde de også denne uken — og denne gangen var fokus over på utvikleropplevelsen!

Det var egentlig ikke noen store forbedringer, men definitivt mange hakk i riktig retning. Highlights i mine øyne var:

  • Minifisering av kode går nå 7 ganger så fort (med et opt-in flagg for å bruke SWC)
  • Next.js initialiserer og installerer automatisk TypeScript om du legger til en .ts fil
  • Du trenger ikke restarte serveren om du endrer en .env fil

Utvikleropplevelsen til Next.js er jo allerede ganske bra, så at de fortsetter å fokusere på å forbedre den er egentlig mest imponerende. Kudos 🙌

Les mer om den nye versjonen i den offisielle bloggposten!

Next.js sin Layout RFC har fått en oppdatering

En annen kul nyhet denne uken er at Next.js Layout RFC (“request for comment”, et slags arbeidsdokument for nye features) har fått seg en real oppdatering.

RFCen prøver å løse en utfordring som har vært til stede i Next.js siden tidenes morgen — nemlig at det er vanskelig å dele layouts på tvers av forskjellige routes, og beholde tilstanden i dem om du får til å gjøre det.

Løsningen som foreslås er ganske klart inspirert av Remix sin løsning på det samme problemet, men innfører også et par ekstra triks, som feilhåndtering og lasthåndtering. Ganske spennende greier!

Les mer om dette i den andre offisielle bloggposten – eller i denne flotte tråden fra en devreller på Twitter.

Next.js Conf kommer!

Helt til slutt er det tid for enda en versjon av Vercels gratiskonferanse om alle ting Next.js. Den inneholder som regel ganske mye ny og spennende teknologi, samt en god del talks fra det sprudlende communityet rundt Next.js.

Alt går av stabelen 25. oktober — så be there or be, eh, triangel?

Glem fetch — si hallo til hyper-fetch

Det er et nytt nettverksbibliotek på hypetoget for tiden, og det er hyper-fetch. Dette er et plattformsagnostisk TypeScript-bibliotek, som løser mange av de samme utfordringene som SWR og React-Query gjør – men litt mer hyper, tydeligvis.

Jeg kjenner jeg er genuint skeptisk til noen som kaller produktet sitt for “The Ultimate Fetching Solution”, men det kan godt hende jeg blir solgt når jeg får testet det ut ordentlig.

Salgspitchen garanterer full typesikkerhet, du kan bruke det både i Node og i forskjellige frontendrammeverk, og det ser relativt rett frem ut å bruke (om enn ikke like elegant som utfordrerne sine).

Ta en titt selv på dokumentasjonssiden deres, og sjekk om det fungerer i din kontekst.

Preact får signaler 🚦

Preact — Reacts noe enklere, spinklere lillebror — har fått støtte for Solid.js-favoritten signals. Signals er lettvekts-tilstandshåndtering som er såkalt reaktivt — om du endrer verdien på selve variabelen, vil alle komponenter som leser denne variabelen bli oppdatert.

I den offisielle bloggposten introduserer de dette som et ganske revolusjonerende grep for hvor rask appen din kan være. I “normal” React vil det føre til at en haug med komponenter som er i mellom der staten bor (i en global kontekst, for eksempel), og der den brukes (helt nederst i et komponenttre, for eksempel), vil måtte re-rendres, selv om ingenting der har endret seg.

I Preact med signals, derimot, er det kun én enkel node som må endres. Og er endringen kun tekst, omgår man selve VDOM-treet og modifiserer DOM-en direkte.

Altså, alt det her høres jo ganske imponerende ut — det gjør det. Og dokumentasjonen så grei nok ut i og for seg. Men det har noen negative sider også. Ifølge React-sjef Seb Markbåge vil det ikke fungere i React 18s “Concurrent Mode”, i tillegg til at det fjerner seg stadig mer vekk fra “vanlig” React-APIer. Kanskje en grei tradeoff for noen, da.

Uansett, spennende nyvinninger fra Preact!

SSR er død — CSR lenge leve

De som følger veeeeldig godt med, fikk kanskje med seg at jeg skrev denne brannfakkelen for noen uker siden om hvordan standard klientsideapper ikke lenger er bra nok. Argumentet mitt var at man får veldig mange oppsider inkludert om man bruker et rammeverk som Next.js eller Remix.

Så da kan man jo tenke seg hvordan jeg følte meg da jeg leste dette dypdykket som mente det direkte motsatte – at klientsideapper er raskere, bedre og vel så god på SEO-ting som Next.js.

Jeg må innrømme at jeg ikke er helt solgt – forfatteren gjør noen ganske avanserte optimaliseringer med klientside-appen sin, mens han ikke engang prøver å optimalisere Next.js-applikasjonen han bruker for å demonstrere ting.

Men uansett hvor uenig jeg er, synes jeg at du burde gi artikkelen en titt — forfatteren viser definitivt frem noen gode poenger vi alle kan bruke når vi forvalter en eksisterende klientside-applikasjon.

To morsomme CSS-dingser

Helt til slutt, vil jeg dele to fine CSS-triks jeg lærte av Jhey på Twitter.

Først denne:

Og så denne hvor han koder en skeleton-loader i ren CSS som en 10x developer. 😁

Utrolig gøy å se folk som deler kunnskapen sin på lekne måter.

Og med det var vi ved veis ende i denne ukens versjon av ForrigeUke. Takk for meg 👋