typescriptbeginner
Cached Fetch with Revalidation
Fetch external data in Server Components with time-based revalidation and error boundaries.
typescriptPress ⌘/Ctrl + Shift + C to copy
interface Post {
id: number;
title: string;
body: string;
}
export async function getPosts(): Promise<Post[]> {
const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
next: { revalidate: 3600 }, // Cache for 1 hour
});
if (!res.ok) {
throw new Error(`Failed to fetch posts: ${res.status}`);
}
return res.json();
}
// In a Server Component:
// const posts = await getPosts();Use Cases
- CMS content fetching
- API data loading
- Static page hydration
Tags
Related Snippets
Similar patterns you can reuse in the same workflow.
typescriptintermediate
Next.js ISR & On-Demand Revalidation
Configure Incremental Static Regeneration with time-based and on-demand revalidation strategies.
Best for: Caching CMS content with periodic refresh
#nextjs#isr
typescriptadvanced
Cache Tags and On-Demand Revalidation
Tag cached data with identifiers and revalidate specific cache entries on demand.
Best for: CMS webhooks
#nextjs#caching
typescriptadvanced
On-Demand ISR Revalidation
Trigger incremental static regeneration via API route with secret token validation for instant cache purge.
Best for: CMS content updates
#isr#revalidation
typescriptintermediate
NextAuth Session Check Pattern
Check authentication status in Server Components and redirect unauthorized users with NextAuth.js.
Best for: Protected pages
#authentication#nextauth