← Next.js learning pathNext.js · Module 4 of 10
Data fetching and caching
Fetch data on the server and control how it is cached.
📖 Key ideas
- Server components can be async: const data = await fetch(url).
- Fetch directly from databases in server code.
- Caching and revalidation control freshness: revalidate: 60.
- Dynamic data (cookies, headers) makes a route render per request.
- Show loading.tsx or <Suspense> while waiting.
💡 Real-life example: Revalidation is a shop restocking shelves every hour: customers get fast service and fairly fresh stock.
async componentServer component that awaits data
revalidateSeconds before cached data refreshes
Dynamic renderingRendered per request
SuspenseShows fallback while loading