Dit gebeurde ongeveer zes maanden geleden, maar Next.js 16 werd officieel uitgebracht op 21 oktober 2025.
Het concept van cachecomponenten werd geïntroduceerd in Next.js 16, waardoor expliciete controle over caching mogelijk werd.
use cacheAlleen de locatie waar de instructie is geschreven, wordt in de cache opgeslagen.<Sunpense>Dit maakt ook caching op componentniveau mogelijk.
Aangezien ik er toch een artikel over schrijf, vat ik even samen hoe je de "Cache Components"-functie van Next.js 16 kunt gebruiken, als een soort memo voor mezelf!
Vier caches in Next.js AppRouter
Next.js AppRouter biedt de volgende vier soorten caching:
- Request Memoization：Dit houdt in dat dubbele verzoeken worden voorkomen. Zelfs als dezelfde fetch-functie in verschillende componenten wordt aangeroepen, wordt deze slechts één keer uitgevoerd. Dit is een functie die Next.js automatisch afhandelt.
- Data CacheDe `fetch`-optie manipuleert de cache-implementatie.
- Full Route Cache：Pagina-caching die werkt met statische rendering (SSG, ISR). Een mechanisme dat aan de serverzijde cachet met behulp van RSC-payloads en HTML.
- Router Cache：Dit mechanisme cachet tijdelijk alleen de RSC-payload in het geheugen van de client. Het werkt door gebruik te maken van de Next.js -component.
Nieuwe functies in Next.js 16"use cache"
Wat kun je doen met de nieuwe functie Cachecomponenten?
use cacheGebruik dit om de cache-instellingen te vereenvoudigen.use cacheAlleen de locatie waar de code is geschreven, wordt in de cache opgeslagen, en de cache kan nu expliciet worden beheerd.<Suspense>Door componenten in een `