Data Fetching & CachingBeginner
1Question 1 of 1
typescriptHow does data fetching and caching work in Next.js?
Explanation & Concept
Next.js extends the native `fetch` API to provide fine-grained caching and revalidation controls on the server:
• Default (cached): Reuses cached data indefinitely. • Time-based (`next: { revalidate: 60 }`): Revalidates data in the background after 60 seconds. • Dynamic (`cache: 'no-store'`): Always fetches fresh data on every request.
Code Example
typescript
export default async function ProductPage({ params }: { params: { id: string } }) {
// Revalidate price cache every 60 seconds
const res = await fetch(`https://api.store.com/products/${params.id}`, {
next: { revalidate: 60, tags: ["products"] }
});
const product = await res.json();
return <div>{product.title} - ${product.price}</div>;
}How It Works & Key Takeaways
Combining cache tags with `revalidateTag('products')` allows programmatic on-demand cache invalidation after mutations.
Mock Test · 1 Questions · Optional
Ready for Static vs Server Rendering (SSG/SSR)?
Take a quick test to evaluate yourself, or move straight to the next module.
Beginner1 questions