Static pages that update in the background - best of both worlds
This uses a Next.js Server Action to call revalidatePath()
Pages are pre-rendered at build time for instant loading
Content revalidates in background after specified time
Users get fresh content without waiting for builds
quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto
est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla
et iusto sed quo iure voluptatem occaecati omnis eligendi aut ad voluptatem doloribus vel accusantium quis pariatur molestiae porro eius odio et labore et velit aut
Time-based (60 seconds)
stale-revalidating
1/31/2026, 2:17:00 PM
JSONPlaceholder API
// page.tsx
export const revalidate = 60;
export default async function Page() {
const data = await fetch(url, {
next: { revalidate: 60 }
});
return <div>{/* content */}</div>;
}// Individual fetch control
const posts = await fetch(url, {
next: {
revalidate: 60, // 60 seconds
tags: ['posts'] // Cache tags
}
});
// On-demand revalidation
revalidateTag('posts');| Strategy | Initial Load | Data Freshness | Server Load | Build Time |
|---|---|---|---|---|
| SSG | ⚡ Instant | ❌ Build-time only | ✅ Minimal | ⚠️ Can be long |
| SSR | ⚡ Fast | ✅ Always fresh | ❌ High | ✅ Quick |
| ISR | ⚡ Instant | ✅ Configurable | ✅ Low | ✅ Quick |
| CSR | ❌ Slow | ✅ Real-time | ✅ Minimal | ✅ Quick |
revalidate: 3600revalidate: 60revalidate: 10