Aantekeningen over Next.js 16 Cache Component

Ongeveer een half jaar geleden, op 21 oktober 2025, verscheen Next.js 16 officieel.

Het concept van Cache Components werd geïntroduceerd met Next.js 16, waarmee caching nu expliciet kan worden beheerd.

Alleen de plaats waar je de use cache-directive plaatst, wordt gecachet, en met <Sunpense>het gebruik van de caching op componentniveau is het nu ook mogelijk om componenten afzonderlijk te cachen.

Omdat er ook een artikel over dit onderwerp is verschenen, zal ik in dit bericht vooral ingaan op het gebruik van Cache Components in Next.js 16, en tegelijk mijn eigen aantekeningen samenvatten!

De vier caches van Next.js AppRouter

Er zijn in Next.js AppRouter vier soorten caching, zoals hieronder beschreven.

• Request Memoization: Dit verwijdert dubbele verzoeken. Zelfs als verschillende componenten dezelfde fetch aanroepen, wordt deze slechts één keer uitgevoerd. Dit is een functie die Next.js automatisch uitvoert.
• Data Cache: een mechanisme om de caching van implementaties te beheren via de fetch-opties.
• Full Route Cache: een cache op paginaniveau die werkt bij statische rendering (SSG, ISR). Het slaat de RSC-payload en HTML op de server op.
• Router Cache: een tijdelijke cache in het geheugen van de client die alleen de "RSC-payload" bewaart. Deze werkt wanneer je de -component van Next.js gebruikt.

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

Over de nieuwe functie Cache Components: wat er nu mogelijk is.

• Met use cache wordt de cacheconfiguratie eenvoudiger. Alleen de plaats waar use cache is geschreven wordt gecachet, waardoor de cache expliciet beheerd kan worden.
• Door een component in <Suspense>... te plaatsen, kan deze worden gescheiden en kan caching per component worden ingesteld.

Tot en met Next.js 15 werd fetch standaard gecachet. Het was moeilijk te zien wat wel en niet gecachet was, waardoor onvoorspelbare caching gemakkelijk optrad.

Omdat er standaard automatisch werd gecachet, was het toevoegen van fetch(URL, { cache: 'no-store' }) nodig om caching uit te schakelen.

Next.js 16 werkt daarentegen andersom: caching wordt alleen toegepast wanneer dat nodig is, door use cache op te geven. Dit is duidelijk en eenvoudiger.

Daarnaast kon de Data Cache van Next.js voorheen alleen via fetch worden gebruikt. Nu kan cache ook rechtstreeks worden toegepast op asynchrone functies die geen fetch gebruiken, zoals databasequery's.

Implementatiemethode

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

Met deze instelling zijn de functies van Cache Components beschikbaar!

import type { NextConfig } from "next";

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

export default nextConfig;

Voeg de use cache-directive toe aan het begin van de component die je wilt cachen. Als je alleen specifieke functies wilt cachen, plaats je de directive binnen 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 je use cache niet toevoegt aan de fetch-functie?

Vanaf Next.js 16 moet je use cache toevoegen om cache te gebruiken. Wat gebeurt er als je geen use cache en ook geen cache-optie toevoegt?

Bij cacheComponents: true ontstaat een fout. Als je cache bewust wilt uitschakelen, gebruik dan niet fetch(url, { cache: 'no-store' }), maar omhul het eenvoudig <Suspense>met een wrapper! (Bij cacheComponents: false (standaard) kan no-store nog steeds worden gebruikt zoals voorheen.)

Cache op functieniveau

Voorheen kon je cache-instellingen alleen op paginaniveau opgeven. Met use cache en kun je cache-instellingen nu ook op component- en functieniveau configureren.

This means that static and dynamic rendering can be mixed within a single page, allowing fast static delivery and dynamic content to coexist. This dramatically improves initial load speed and UX. (This is the PPR rendering method.)

Suspense

De rol van <Suspense>is om een deel van de pagina afzonderlijk te kunnen verwerken, losgekoppeld van de rest.

Door componenten te omhullen met <Suspense>, kunnen ze worden gescheiden. Als u wilt cachen per component, geeft u dit aan binnen de omhulde component.

Over rendering

De cacheconfiguratie bepaalt welke renderingmethode wordt gebruikt.

"Hoe wilt u deze pagina of data tonen?" (bijvoorbeeld hoe vaak deze wordt bijgewerkt)

↓

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

↓

Stel vervolgens de bijbehorende cache in

is de gedachte achter dit alles.

Er zijn ook meerdere patronen voor rendering-methoden, maar die laat ik in dit artikel buiten beschouwing!

Neem bijvoorbeeld

een "dynamische routing-pagina die data van microCMS ophaalt en blogartikelen weergeeft"

↓

SSG of ISR is de beste rendering-methode (omdat artikelinhoud niet vaak wordt bijgewerkt).

↓

Met caching is het optimaal → voeg use cache toe.

Zo kun je het implementeren.

Overigens: als je in het next.config.js-bestand Cache Components niet op true zet, kun je gewoon de bekende cache-optie van fetch blijven gebruiken.

Conclusie

Bij het bepalen van je cache-instellingen is het belangrijk om eerst te denken aan: "Hoe wil ik dat deze data en pagina getoond worden?" Implementeer vervolgens de optimale performance die bij die pagina past.

Zodra dat antwoord duidelijk is, wordt ook vanzelf duidelijk of je use cache wilt gebruiken.

Veel mensen zien cache, rendering-methoden en data fetching als losse onderdelen, maar bij mij viel alles juist op zijn plek!

Het is belangrijk om dit niet als afzonderlijke concepten te zien, maar als één samenhangend geheel!!