03. Rendering Strategies: Static Rendering (SSG), Dynamic Rendering (SSR) & Streaming • Next.js 14+ App Router & Full-Stack Architecture • Rishabh Ki Kaksha

1. **Static Rendering (SSG / Build Time):** Default behavior. Build time par HTML generate hota hai aur CDN edge par cache ho jata hai (0ms TTFB!).
2. **Dynamic Rendering (SSR / Request Time):** Har incoming user request par server dynamic HTML render karta hai (Personalized dashboards, real-time inventory).
3. **Streaming SSR (`<Suspense>`):** Fast static shell instantly bhejkar slow database components ko progressive HTTP chunks me stream karta hai!

---

### 2. Static vs Dynamic Switch (Dynamic Functions ⚡)

Next.js automatically page ko **Dynamic Rendering** me switch kar deta hai agar page me ye **Dynamic Functions** use hon:
*   `cookies()`
*   `headers()`
*   `searchParams` prop
*   `fetch(url, { cache: 'no-store' })`

```tsx
// Force Dynamic or Static via Segment Config:
export const dynamic = "force-dynamic"; // Equivalent to SSR (getServerSideProps)
// export const dynamic = "force-static";  // Equivalent to SSG (getStaticProps)
```

---

### 3. Progressive Streaming SSR with `<Suspense>`

```tsx
import { Suspense } from "react";
import SlowAnalyticsWidget from "@/components/SlowAnalyticsWidget";
import FastHeader from "@/components/FastHeader";

export default function Dashboard() {
    return (
        <div>
            {/* ⚡ 1. Sent to browser INSTANTLY (< 50ms): */}
            <FastHeader />

{/* 🌊 2. Shows Skeleton, then streams HTML when DB query completes: */}
            <Suspense fallback={<div className="animate-pulse h-32 bg-gray-200" />}>
                <SlowAnalyticsWidget />
            </Suspense>
        </div>
    );
}
```

---

### 4. Master Comparison Matrix

---

### 5. Interview Ke 3 Sawal Is Topic Se

1. **Streaming SSR traditional SSR se user experience me kaise behtar hai?** -> Traditional SSR me slow DB query poore page response ko block karti hai (Blank screen wait); Streaming SSR me fast layout turant paint ho jata hai aur slow widgets chunk-by-chunk populate hote hain.
2. **`generateStaticParams()` function kya karta hai?** -> Dynamic routes (jaise `app/blog/[slug]/page.tsx`) ke saare possible slugs ko build time par pre-render karke static HTML pages generate karta hai.
3. **`export const revalidate = 60` segment option ka kya impact hota hai?** -> Ye page ko Incremental Static Regeneration (ISR) mode me daal deta hai jisme 60 seconds tak static page serve hota hai fir background me re-render hota hai.

---
**Next Topic:** 04. React Server Components (RSC) Deep Dive: The Server-Client Component Boundary

Loading lesson content...

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track