Frontend Mastery
Lesson 21 of 30 70% of course

Next.js App Router: SSR vs SSG vs ISR

16 · 8 min · 5/23/2026

Sign in to track progress and bookmarks.

Mastering Next.js Rendering

Next.js is the industry standard for React applications. It provides multiple ways to render your app. The "Best" way depends on one question: When do you have the data?

1. Static Site Generation (SSG)

Render the page at Build Time. The HTML is static and served via a CDN. Pros: Fastest possible speed. Cons: Data can get stale if not rebuilt.

2. Server-Side Rendering (SSR)

Render the page on Each Request. The server fetches fresh data and sends a fully-formed HTML page to the browser. Pros: Always fresh data. Cons: Slower because the user has to wait for the server and API calls.

3. Incremental Static Regeneration (ISR)

The "Silver Bullet." Next.js serves the stagnant page immediately (fast) but re-generates it in the background every X seconds. This gives you the speed of SSG with the freshness of SSR.

4. Interview Mastery

Q: "When would I choose Next.js over a standard Vite (SPA) app?"

Architect Answer: "I choose Next.js when **SEO** and **First Contentful Paint** are critical. A standard Vite app is a 'Client Side App'—the browser gets an empty div and then JS has to download and run before the user sees anything. Next.js sends the content *immediately* as HTML. This leads to better search ranking and higher conversion rates."

Test your knowledge

Quizzes linked to this course—pass to earn certificates.

Browse all quizzes
Frontend Mastery

On this page

1. Static Site Generation (SSG) 2. Server-Side Rendering (SSR) 3. Incremental Static Regeneration (ISR) 4. Interview Mastery
1. Core Foundation & Modern JS
ES6+ for Architects: Closures, Generators, and Symbols Asynchronous JS: Event Loop, Microtasks, and Promises TypeScript Mastery: Advanced Types, Generics, and Utility Types
2. React Internals & Core Hooks
Virtual DOM vs Reconciliation: The Fiber Architecture Effective useState & useEffect: Avoiding infinite loops useMemo vs useCallback: When optimization becomes a bottleneck useContext + useReducer: Building a built-in state manager Custom Hooks: Extracting business logic for reusability
3. Professional State Management
Redux Toolkit (RTK): Slices, Selectors, and Thunks RTK Query: Automating API caching and synchronization Zustand: The lightweight alternative to Redux Signal-based State: The future of fine-grained reactivity
4. Performance & Rendering
Component Re-rendering: How to profile and fix slow UIs Lazy Loading & Code Splitting: Shrinking your bundle size Virtualization: Rendering million-row lists efficiently Web Workers: Offloading heavy calculations to background threads
5. Design Systems & CSS
Modern CSS: Grid, Flexbox, and Container Queries CSS-in-JS vs TailWindCSS: Choosing the right styling strategy Storybook: Building a shared component library Accessibility (a11y): Building inclusive web interfaces
6. Next.js & Modern Frameworks
Next.js App Router: SSR vs SSG vs ISR React Server Components (RSC): The end of the Waterfall Data Fetching Patterns: Streaming and Suspense SEO for Frontend: Meta Tags, JSON-LD, and Core Web Vitals
7. Testing & Security
Unit Testing: Vitest and React Testing Library E2E Testing: Playwright for mission-critical flows Frontend Security: XSS, CSRF, and Content Security Policy State Synchronization: Optimistic UI & WebSockets
8. Final Polish & Interview
Micro-Frontends: Scalable architecture for enterprise teams Frontend Architect Interview: System Design & Performance