Partial Prerendering (PPR): Static Speed with Dynamic Freshness
Partial Prerendering delivers static shells from the Edge CDN instantly, while dynamic sections stream directly to the browser inside React Suspense boundaries.
js
// Page component leveraging Partial Prerendering & Suspense
import { Suspense } from 'react';
import StaticHero from './StaticHero';
import DynamicUserFeed from './DynamicUserFeed';
import FeedSkeleton from './FeedSkeleton';
export default function DashboardPage() {
return (
<main className="max-w-5xl mx-auto px-4 py-8">
{/* Instant static render */}
<StaticHero />
{/* Streamed dynamic feed */}
<Suspense fallback={<FeedSkeleton />}>
<DynamicUserFeed />
</Suspense>
</main>
);
}
Granular Cache Invalidation
Modern Next.js applications leverage tag-based cache invalidation, refreshing only mutated queries without costly full-site rebuilds.
js
// Granular on-demand cache invalidation
import { revalidateTag } from 'next/cache';
export async function publishPost(newPostData: any) {
'use server';
await saveToDatabase(newPostData);
revalidateTag('blog-posts');
}
.jpg "Building your Website from Scratch with Next.js. A React-Powered Development Journey")
