Next.js 16 Cache Component-notities

Dit gebeurde ongeveer een half jaar geleden, maar op 21 oktober 2025 werd Next.js 16 officieel uitgebracht.

Het concept van Cache Components zelf werd geïntroduceerd in Next.js 16, en nu kunnen caches expliciet worden beheerd.

Alleen de plaats waar de use cache-richtlijn is geschreven, wordt in cache opgeslagen, en caching op componentniveau is nu ook mogelijk met behulp van .

Aangezien dit artikel ook wordt gepubliceerd, zal ik deze keer mijn notities samenvatten met een focus op hoe je Next.js 16's "Cache Components" gebruikt!

Vier soorten cache in Next.js AppRouter

De soorten cache in Next.js AppRouter zijn de volgende 4 patronen.

• Request Memoization: Dit is de deduplicatie van dezelfde aanvragen. Zelfs als dezelfde fetch in verschillende componenten wordt aangeroepen, wordt deze slechts eenmaal uitgevoerd. Dit is een functie die Next.js automatisch uitvoert.
• Data Cache: hiermee worden cacheimplementaties beheerd via de fetch-opties.
• Full Route Cache: cache per pagina die werkt met statische rendering (SSG, ISR). RSC-payload en html worden aan serverzijde gecacht.
• Router Cache: mechanisme dat alleen het RSC-payload tijdelijk in het clientgeheugen opslaat. Dit werkt bij gebruik van het Next.js -component.

Nieuwe functie in Next.js 16: "use cache"

Wat je kunt doen met de nieuwe Cache Components-functie.

• Cacheinstellingen vereenvoudigen met use cache. Alleen de plaats waar je use cache schrijft, wordt gecacht, wat expliciete cachecontrole mogelijk maakt.
• Door componenten in te pakken met kunnen deze worden gescheiden, waardoor caching op componentniveau kan worden ingesteld.

Tot en met Next.js 15 werd fetch standaard gecacht, waardoor onduidelijk was waar wel en waar niet gecacht werd. Dit maakte onverwacht caching eerder waarschijnlijk.

Omdat standaard automatisch werd gecacht, was het toevoegen van fetch(URL, { cache: 'no-store' }) nodig om dit ongedaan te maken.

Next.js 16 daarentegen vereist use cache alleen wanneer caching nodig is, wat een duidelijkere en eenvoudigere manier biedt.

Voorheen kon de Data Cache van Next.js alleen via fetch worden gebruikt, maar nu kunnen directe cacheregels ook worden toegepast op asynchrone functies die geen fetch gebruiken, zoals databasequery's.

Implementatiemethode

U moet Cache Components inschakelen in het next.config.js bestand.

Met deze configuratie worden de mogelijkheden van Cache Components beschikbaar!

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
};

export default nextConfig;

Voeg de use cache richtlijn toe aan het begin van het component dat u in cache wilt opslaan. Als u alleen bepaalde functies in cache wilt opslaan, schrijft u deze in de functie.

'use cache'

async function getPosts() {
  const res = await fetch('<https://api.example.com/posts>')
  return res.json()
}

export default async function PostList() {
  const posts = await getPosts()
  return (
    <ul>
      {posts.map(post => <li>{post.title}</li>)}
    </ul>
  )
}

Wat gebeurt er als u use cache niet aan de fetch-functie toevoegt?

Vanaf Next.js 16 moet u use cache toevoegen om caching in te schakelen. Maar wat gebeurt er als u use cache en cache opties beide weglaat?

Met de instelling cacheComponents: true krijgt u een fout. Als u caching opzettelijk wilt uitschakelen, gebruikt u fetch(url, { cache: 'no-store' }) niet, maar omgeeft u het gewoon met ! (Met cacheComponents: false (standaard) kunt u no-store als voorheen gebruiken)

Caching op functieniveau

Voorheen kon caching alleen per pagina worden ingesteld, maar met use cache en kunt u nu cacheinstellingen op component- en functieniveau configureren.

Het voordeel hiervan is dat statische en dynamische rendering kunnen worden gemengd op één pagina, wat snelle statische levering en dynamische inhoud mogelijk maakt, en de initiële laadsnelheid en UX drastisch verbetert. (PPR is een renderingmethode)

Suspense

De rol van afzonderlijk verwerken gescheiden van andere onderdelen van de pagina is wat doet.

Door componenten in in te pakken, kunnen ze worden gescheiden, dus als u cache per component wilt instellen, geeft u dit op in de component die erin is verpakt.

Over rendering

De renderingmethode wordt bepaald door cache-instellingen.

"Hoe wil ik deze pagina/gegevens presenteren?" (updatefrequentie enzovoort)

↓

Bepaal de renderingmethode (SSG / ISR / SSR / PPR / CSR)

↓

Stel de bijbehorende cache in

is de manier van denken.

Er zijn verschillende renderingpatronen, maar we slaan die deze keer over!

Bijvoorbeeld:

In het geval van een "dynamische routeringspagina die blogarticelen weergeeft door gegevens uit microCMS op te halen"

↓

SSG of ISR is de optimale renderingmethode (omdat artikelinhoud niet frequent wordt bijgewerkt)

↓

Caching is optimaal → voeg use cache toe

Dit is hoe je dit kunt implementeren.

Trouwens, als je Cache Components niet op true instelt in het next.config.js-bestand, kun je de traditionele fetch cache-optie gewoon blijven gebruiken.

Samenvatting

Bij het bepalen van cacheinstellingen is het belangrijk om na te denken: "Hoe wil ik deze gegevens en pagina weergeven?" Implementeer vervolgens de optimale prestaties op basis van die pagina.

Zodra je dat antwoord hebt bepaald, beslis je automatisch of je use cache gebruikt.

Veel mensen hebben de neiging caching, renderingmethoden en dataophaling apart te begrijpen, maar het is eigenlijk allemaal met elkaar verbonden!

Het is belangrijk om ze niet als afzonderlijke concepten te zien, maar als één doorlopend proces!