Free tutorials & notes in Hindi & English · Clean code examples 🧰 मुफ़्त PDF और फ़ोटो टूल्स →
🟣 Data, Server और APIs  ·  Lesson 20

SSG, SSR और ISR Rendering

HTML बनाने के चार तरीके

"Rendering" का मतलब components को HTML में बदलना। सवाल है यह कब और कहाँ होता है।

StrategyHTML कब बनता हैकहाँExample page
SSGBuild time पर (एक बार)Server, npm run build के दौरानAbout, course pages
ISRBuild पर, फिर हर N seconds में refreshServer, background मेंBlog, product list
SSRहर request परServerDashboard, search results
CSRJS load होने के बाद browser मेंBrowserLive 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 }))
}
npm run buildएक बारHTML filessavedCDN / cachevisitor≈ 20 ms
SSG: सबसे तेज़ page

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>
}
VisitorNext.js serverDatabaseGET /dashboard (cookie)इस user के लिए queryrowsfresh personal HTML
SSR: fresh और personal, हर बार render

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>)
}
BuildHTML v10–10 minv1 serve (तेज़)10 min बादv1 serve + rebuildअगला visitorv2 मिलता हैrepeat
ISR: static speed के साथ fresh content

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 कब बनता है?

Page cookies(), headers(), connection() use करता है?हाँ → dynamic ƒsearchParams पढ़ता है?हाँ → dynamic ƒहर request पर uncached fetch या DB call?हाँ → dynamic ƒइनमें से कुछ नहींstatic ○ / ● (+ revalidate = ISR)
Next.js आपका code अपने आप check करता है

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. 1सबके लिए एक जैसा और कम बदलता है → SSG
  2. 2सबके लिए एक जैसा पर कभी-कभी बदलता है → ISR (revalidate)
  3. 3हर user या query के लिए अलग → SSR (dynamic)
  4. 4User के देखते हर second बदलता है → server page के अंदर CSR
Rule of thumb

आम गलतियाँ

  • 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 होता है।
← Next.js Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

अगला topicRoute Handlers (API बनाएँ) आपकी प्रगति: 20 / 37 (54%) · Lesson 21 / 37 आगे बढ़ें →

यह lesson कैसा लगा?

आपकी राय से हम content और बेहतर बनाते हैं।

अपना review और सुझाव लिखें (वैकल्पिक)

Review approve होने के बाद आपका नाम और शहर इसके साथ public दिख सकते हैं। Email या phone न लिखें।

▶ CodingEasily on YouTube

Video से सीखें – आसान Hindi में

चुनी हुई video: RDBMS भाग 3 – Class XI Commerce IT

▶ Channel subscribe करें