Data fetching on the server
Inside a Server Component, fetch is patched to integrate with Next.js caching and revalidation. You use the same fetch API you always did, but Next.js now knows about it and can deduplicate calls, cache results, and revalidate on a schedule.
// Always fresh on every request
const res1 = await fetch('/api/books', { cache: 'no-store' });
// Static, cached forever until revalidated
const res2 = await fetch('/api/books', { cache: 'force-cache' });
// Cached for 60 seconds
const res3 = await fetch('/api/books', { next: { revalidate: 60 } });Three caching modes with the same API.
Three flavors of caching. no-store is for data that changes every request, like a personalized dashboard. force-cache is for static content that only changes when you redeploy. next.revalidate sits in the middle: cached for a window, then refreshed. Pick the one that matches how fresh your data needs to be.
Quiz: Quiz
Loading practice…