Static vs Server Rendering (SSG/SSR)Beginner
1Question 1 of 1
typescriptWhat is the difference between SSG, SSR, and ISR in Next.js?
Explanation & Concept
• SSG (Static Site Generation): HTML is generated at build time. Ultra-fast TTFB via CDN edge delivery. • SSR (Server-Side Rendering): HTML is generated dynamically on each request. Best for user-personalized, real-time data. • ISR (Incremental Static Regeneration): Serves static HTML while regenerating pages in the background as requests arrive.
Code Example
typescript
// Pre-render static paths at build time (SSG)
export async function generateStaticParams() {
const posts = await getTopPosts();
return posts.map((post) => ({ slug: post.slug }));
}How It Works & Key Takeaways
Generating static params at build time serves thousands of content pages instantly from global CDN edges with zero database queries.
Mock Test · 1 Questions · Optional
Ready for API Routes?
Take a quick test to evaluate yourself, or move straight to the next module.
Beginner1 questions