Frontend Mastery

Next.js App Router: SSR vs SSG vs ISR

1 Views Updated 5/4/2026

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."

Frontend 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