Cache components har blitt enda hottere i Next 16.4 🔥

Next 16.4 kom ut forrige uke, og Vercel satser enda mer på cache components! Det skal visstnok bli standardmekanismen for caching fra og med Next 17, og 16.4 kommer med en rekke forbedringer.

Se for deg at du har en e-post-klient med mange meldinger. Hver melding kan ha en tråd full av eldre meldinger.

Meldinger og tråder må hentes fra databasen gjennom Next-serveren. For å spare litt ressurser, kan vi bruke use cache til å cache både meldinger og tråder. Hver e-post vil laste i noen sekunder når vi åpner den for første gang, men så vil den bli cachet i nettleseren så vi slipper lastingen neste gang vi åpner den:

async function getMessage(id) {
  'use cache'; // cacher meldinger
 
  return db.query.messages.findFirst({ where: eq(messages.id, id) });
}
 
async function getThread(id) {
  'use cache'; // cacher tråder
 
  return db.query.messages.findMany({
    where: eq(messages.threadId, id),
    orderBy: asc(messages.createdAt),
  });
}

Her er det masse tid å spare, spesielt i e-poster med lange tråder!

Noe vi kan gjøre for å slippe den initielle lastingen er å hente dataene våre på forhånd, altså "prefetche" de! Men med mange e-poster og lange tråder, risikerer vi å overbelaste Next-serveren. Tidligere måtte vi kanskje ha skrudd av prefetching, men Next 16.4 lar oss styre hva vi prefetcher!

import { navigation } from 'next/cache';
 
async function Thread({ id }) {
  await navigation(); // hindrer prefetching
  const thread = await getThread(id);
 
  return (
    <>
      {thread.map((message) => (
        <div key={message.id}>{message.body}</div>
      ))}
    </>
  );
}

Med await navigation() sier vi at en tråd aldri kan prefetches. Brukeren må faktisk navigere seg inn på siden hvor komponenten blir brukt, før getThread() kalles. Meldinger, som brukes på samme side som tråder, vil fortsatt bli prefetcha. Med navigation() får vi altså mer kontroll over hva som prefetches og ikke.

Utover dette får vi noen forbedringer i Turbopack, som blant annet får bedre chunking, og lager mindre produksjonsbygg. I tillegg støttes React 19.3 med all sin nye funksjonalitet som View Transitions og det nye browser-APIet.

Mye god lesing her 👇

nextjs.org

Next.js 16.4

Next.js 16.4 introduces lazy compilation, smaller Turbopack output, React 19.3 features, Cache Components improvements, and new developer ...

Kunstig intelligens gjør at Shopify dropper React Native 🤖

Shopify hadde opprinnelig to mobil-applikasjoner; én for Android og én for iOS. All funksjonalitet måtte dermed skrives to ganger. Android var spesielt vanskelig å lage applikasjoner for, fordi operativsystemet brukes på mange typer enheter med ulike skjermstørrelser og maskinvare.

I 2020 bestemte Shopify seg for å bytte til React Native. Det ville la dem levere ny funksjonalitet raskere, fordi alt bare måtte skrives én gang. Utvikleropplevelsen var ganske lik mellom Android, iOS og web, så utviklere kunne bruke kompetansen sin på tvers av plattformer.

Men React Native er til syvende og sist et rammeverk, og ikke ulikt en løk, har rammeverk mange lag. Lag på lag med abstraksjoner.

Det er absolutt mulig å skrive en native Kotlin/Swift mobil-app med dårligere ytelse enn en applikasjon skrevet med React Native, men da skal du ha prøvd.

Kunstig intelligens har løst mange av problemene med native app-utvikling. Agenter er gode til å skrive native applikasjonskode. Erfaringsmessig er de enda bedre til å kopiere eksisterende funksjonalitet fra én tech-stack til en annen. Dermed kan en utvikler skrive funksjonalitet for iOS, og få en agent til å implementere den samme funksjonaliteten for Android. Forretningslogikk kan forøvrig deles, og med et felles test-oppsett blir det også enkelt å kontrollere at alt fungerer likt på tvers.

Fremover skal derfor Shopify migrere alle sine applikasjoner tilbake til native 😵‍💫

Sjekk ut hele bloggposten til Gergely Orosz!

newsletter.pragmaticengineer.com

Why has Shopify dropped React Native?

It’s only been a year since the e-commerce platform declared it was very happy with React Native, but now Shopify is dumping it – and the ...

Hva rører seg hos React Foundation? 🌱

På fjorårets React conf ble det annonsert at Meta ikke lenger skulle eie prosjekter som React, React Native eller JSX. De skulle heller eies av en uavhengig organisasjon: React Foundation. Organisasjonen eier nå varemerkene, repoene og infrastrukturen, og har ansvar for finansiering og arrangementer som React Conf.

I juni lanserte React Foundation nettsiden sin, react.foundation. Siden den tid har de egentlig vært ganske stille, men endelig begynner vi å se noen livstegn igjen. Nylig har de nemlig ansatt Barbara Markiewicz som Director of Community, som tyder på at stiftelsen begynner å tar over arrangementsarbeidet som tidligere lå hos Meta. Samtidig nærmer vi oss den første konferansen som offisielt blir arrangert av React Foundation, nemlig React conf i Ghana 4.-5. november.

reactghana.react.foundation

React Conf Ghana · Coming Soon

React Conference Ghana returns soon. Details to be announced.

De mest drevne React-nerdene blant oss får kanskje også dra til London 10.-12. november. Her arrangeres nemlig React Foundation Contributors Summit; et lukket arrangement for sentrale React-bidragsytere som skal samles for å diskutere den tekniske retningen for React.

React Foundation begynner sakte men sikkert å komme i bevegelse. De jobber både med å engasjere sin egen community, og fasiliterer arbeidet for de som er ansvarlige for den tekniske utviklingen av React. Det ser ut som at React er i trygge hender utenfor Metas eierskap.

Det var alt for denne gang, ha en fin uke! 👋