🟣 Data, Server और APIs · Lesson 20
SSG, SSR और ISR Rendering
HTML बनाने के चार तरीके
"Rendering" का मतलब components को HTML में बदलना। सवाल है यह कब और कहाँ होता है।
| Strategy | HTML कब बनता है | कहाँ | Example page |
|---|---|---|---|
| SSG | Build time पर (एक बार) | Server, npm run build के दौरान | About, course pages |
| ISR | Build पर, फिर हर N seconds में refresh | Server, background में | Blog, product list |
| SSR | हर request पर | Server | Dashboard, search results |
| CSR | JS load होने के बाद browser में | Browser | Live clock, chat widget |
SSG – Static Site Generation
JSX – static pages
// app/about/page.jsx — no request data → static (built once)
export default function About() {
return <h1>About EduSite – since 2018</h1>
}
// app/courses/[slug]/page.jsx — static pages for every slug
export function generateStaticParams() {
return courses.map((c) => ({ slug: c.slug }))
}SSR – Server-Side Rendering
JSX – dynamic page
// app/dashboard/page.jsx — reads cookies → dynamic (rendered per request)
import { cookies } from 'next/headers'
export default async function Dashboard() {
const store = await cookies()
const name = store.get('student')?.value ?? 'Guest'
return <h1>Welcome back, {name}</h1>
}ISR – Incremental Static Regeneration
JSX – static + revalidate
// app/blog/page.jsx — static, but rebuilt at most every 10 minutes
export const revalidate = 600
export default async function Blog() {
const res = await fetch('https://cms.example.com/posts', { next: { revalidate: 600 } })
const posts = await res.json()
return posts.map((p) => <h2 key={p.id}>{p.title}</h2>)
}CSR – Client-Side Rendering
JSX – components/Clock.jsx
// components/Clock.jsx — rendered and updated in the browser
'use client'
import { useEffect, useState } from 'react'
export default function Clock() {
const [now, setNow] = useState('')
useEffect(() => {
const id = setInterval(() => setNow(new Date().toLocaleTimeString('en-IN')), 1000)
return () => clearInterval(id)
}, [])
return <span>{now}</span>
}Route dynamic कब बनता है?
Build output पढ़ना
npm run build के बाद Next.js हर route के लिए symbol print करता है। यह EduSite project है:
npm run build का output (EduSite)
Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /about
├ ƒ /api/courses
├ ○ /blog
├ /blog/[slug]
│ ├ ● /blog/why-nextjs-for-websites
│ ├ ● /blog/python-vs-c-first-language
│ └ ● /blog/how-to-start-coding
├ ƒ /contact
├ ƒ /courses
├ /courses/[slug]
│ ├ ● /courses/c-programming
│ ├ ● /courses/python-ai
│ ├ ● /courses/web-development
│ └ ● [+3 more paths]
├ ○ /opengraph-image
├ ○ /robots.txt
└ ○ /sitemap.xml
ƒ Proxy (Middleware)
○ (Static) prerendered as static content
● (SSG) prerendered as static HTML (uses generateStaticParams)
ƒ (Dynamic) server-rendered on demand
/courses और /contact ƒ हैं क्योंकि ये searchParams (?q=, ?course=) पढ़ते हैं। /api/courses request URL पढ़ता है। बाकी सब pre-built है।
कौन सा use करें?
- 1सबके लिए एक जैसा और कम बदलता है → SSG
- 2सबके लिए एक जैसा पर कभी-कभी बदलता है → ISR (revalidate)
- 3हर user या query के लिए अलग → SSR (dynamic)
- 4User के देखते हर second बदलता है → server page के अंदर CSR
आम गलतियाँ
- Root layout में
cookies()पढ़ना → site का हर page dynamic बन जाता है। - "Fresh रहे" इसलिए blog को SSR बनाना → ISR वही freshness static speed के साथ देता है।
- Main content के लिए CSR → search engines खाली page index कर सकते हैं।
सारांश
- SSG = build time, ISR = build + timed refresh, SSR = हर request, CSR = browser में।
- Request-time APIs (cookies, headers, searchParams) route को dynamic बनाते हैं।
- Verify करने के लिए build output में
○ ● ƒपढ़ें।
✅ Practice
Project build करके note कीजिए कौन से routes ○, ● और ƒ हैं। About page में await cookies() जोड़कर rebuild कीजिए और उसे ƒ बनते देखिए — फिर हटा दीजिए।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
SEO के लिए कौन सी rendering best है?
SSG, ISR और SSR तीनों पूरा HTML भेजते हैं, इसलिए तीनों SEO के लिए अच्छे हैं। SSG/ISR सबसे तेज़ हैं क्योंकि HTML request से पहले तैयार होता है। SEO content के लिए CSR सबसे कमज़ोर है।
Next.js static या dynamic कैसे तय करता है?
Route static होता है जब तक वह request-time data use न करे, जैसे cookies(), headers(), searchParams, uncached fetch या connection()। इनमें से कोई भी use करने पर route dynamic बनता है।
क्या एक site में SSG और SSR mix हो सकते हैं?
हाँ। हर route अलग से तय होता है। आम site में static home page, ISR blog और dynamic dashboard होता है।
