The Four Strategies
CSR — Client-Side Rendering
Browser fetches JS, renders in client. Fast navigation after load, poor initial SEO.
SSR — Server-Side Rendering
HTML generated per request. Fresh data, higher server cost.
SSG — Static Site Generation
HTML built at build time. Fastest delivery via CDN, stale until rebuild.
ISR — Incremental Static Regeneration
Static pages revalidated on interval or on-demand. Best of SSG + freshness.
In App Router
// Static (default)
export default async function Page() {
const data = await fetch("https://api.example.com/posts");
return <div>...</div>;
}
// Dynamic — opt out of static
export const dynamic = "force-dynamic";
// ISR
export const revalidate = 3600; // seconds
Interview Questions
Q: When would you choose SSR over SSG?
- Personalized content (user dashboard)
- Real-time data that changes frequently
- SEO-critical pages with dynamic data
Q: What is streaming SSR?
Server sends HTML in chunks as components resolve. Improves TTFB and perceived performance with Suspense boundaries.
Q: Trade-offs of ISR?
Pros: CDN speed + periodic updates. Cons: Users may see stale content between revalidation windows.