SSR vs SSG: Claude Code से Next.js/Astro rendering strategy चुनना

शब्द पहले साफ करें

SSR और SSG में चुनाव सिर्फ “कौन तेज है” वाला सवाल नहीं है। SSR यानी server-side rendering: request आने पर server HTML बनाता है। SSG यानी static site generation: build के समय HTML बनता है और फिर CDN या static hosting से serve होता है। ISR, यानी Incremental Static Regeneration, बीच का रास्ता है: page static की तरह serve होता है, लेकिन समय या revalidation event के बाद फिर से बन सकता है।

Next.js App Router में नया developer अक्सर सोचता है कि Server Component का मतलब हर request पर SSR है। यह सही नहीं है। official Dynamic Route Segments docs में TypeScript examples params को Promise मानते हैं। अगर render को request-time पर साफ तौर पर रोकना हो, तो current API connection है।

अगर आप Claude Code से सिर्फ “page fast कर दो” कहेंगे, तो वह inventory, search result या member UI तक static कर सकता है। अगर सब कुछ SSR कर दिया, तो TTFB और server cost बढ़ सकते हैं। बेहतर तरीका है पहले route matrix बनवाना: data freshness, personalization, update frequency, monetization impact और verification command।

तुलना और real use cases

सवाल	SSG	ISR	SSR
HTML कब बनता है	build time	build और revalidation	request time
सही जगह	articles, docs, landing pages	products, categories, news	dashboard, search, cart
data freshness	build snapshot	time या event based	लगभग latest
cost	कम	मध्यम	अक्सर ज्यादा
आम गलती	build लंबा, stale content	थोड़ी देर old response	cache न हो तो slow

Use case 1 blog या documentation है। अगर body, OGP, internal links और CTA publish time पर stable हैं, तो SSG सही है। Article बदलने पर rebuild करें। JavaScript कम करना हो तो Claude Code code splitting भी देखें।

Use case 2 product page है। Price, stock और category order कुछ मिनट में बदल सकते हैं, पर visitors को fast response चाहिए। ISR यहां अच्छा fit है। official Next.js ISR guide बताता है कि ISR Node.js runtime के साथ चलता है और static export में support नहीं है।

Use case 3 account dashboard है। Cookies, permissions, billing status, unread notifications और private recommendations request-specific होते हैं। इसे SSR की तरह design करें और cache headers साफ रखें। Edge placement सोच रहे हों तो strategy तय करने के बाद Claude Code edge computing पढ़ें।

Next.js SSR example

यह example Next.js App Router project में copy-paste किया जा सकता है। यह dummyjson.com use करता है, इसलिए API key नहीं चाहिए। connection() और cache: "no-store" review में साफ बताते हैं कि page request-time पर data लाता है।

// app/products/[id]/page.tsx
import { notFound } from "next/navigation";
import { connection } from "next/server";

type Product = {
  id: number;
  title: string;
  price: number;
  stock: number;
  updatedAt: string;
};

async function getProduct(id: string): Promise<Product | null> {
  await connection();

  const res = await fetch(`https://dummyjson.com/products/${id}`, {
    cache: "no-store",
  });

  if (res.status === 404) return null;
  if (!res.ok) throw new Error(`Failed to load product: ${res.status}`);

  const data = (await res.json()) as {
    id: number;
    title: string;
    price: number;
    stock: number;
    meta?: { updatedAt?: string };
  };

  return {
    id: data.id,
    title: data.title,
    price: data.price,
    stock: data.stock,
    updatedAt: data.meta?.updatedAt ?? new Date().toISOString(),
  };
}

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await getProduct(id);

  if (!product) notFound();

  return (
    <main>
      <h1>{product.title}</h1>
      <p>Price: ${product.price.toLocaleString("en-US")}</p>
      <p>Stock: {product.stock}</p>
      <p>Updated: {new Date(product.updatedAt).toLocaleString("hi-IN")}</p>
    </main>
  );
}

सबसे बड़ा pitfall है cookies() या headers() को shared layout में डाल देना। यह छोटा convenience change लगता है, पर request-time API कई routes को dynamic बना सकता है। अगर वही layout articles को wrap करता है, तो SSG pages भी प्रभावित हो सकते हैं। Claude Code से पहले affected routes की सूची मांगें।

SSG, ISR और static export अलग रखें

Visitor को SSG और ISR दोनों static जैसे लग सकते हैं, लेकिन operation अलग है। SSG build पर update होता है। ISR time window या event के बाद update होता है। Static export में output: "export" से out folder बनता है और Node.js server की जरूरत नहीं रहती। official Static Exports guide बताती है कि next build हर route के लिए HTML बना सकता है।

// app/catalog/[id]/page.tsx
import { notFound } from "next/navigation";

export const revalidate = 3600;

type Product = {
  id: number;
  title: string;
  description: string;
};

export async function generateStaticParams() {
  return ["1", "2", "3"].map((id) => ({ id }));
}

async function getProduct(id: string): Promise<Product | null> {
  const res = await fetch(`https://dummyjson.com/products/${id}`, {
    next: { revalidate: 3600, tags: [`product:${id}`] },
  });

  if (res.status === 404) return null;
  if (!res.ok) throw new Error(`Failed to load product: ${res.status}`);

  return (await res.json()) as Product;
}

export default async function CatalogPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await getProduct(id);

  if (!product) notFound();

  return (
    <article>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
    </article>
  );
}

// next.config.mjs
const nextConfig = {
  output: "export",
  images: {
    unoptimized: true,
  },
};

export default nextConfig;

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export:check": "next build && npx serve out"
  }
}

Static export और ISR को एक जैसा न मानें। Static export static hosting के लिए है। अगर cookies, on-demand revalidation, Server Functions या real SSR चाहिए, तो server runtime चाहिए। Claude Code को code लिखने से पहले deployment target बताएं: Cloudflare Pages static, Node container, Vercel, Netlify या कुछ और।

Astro में static और on-demand

Astro default रूप से static generation की ओर झुकता है। official Astro on-demand rendering docs कहते हैं कि pages, routes और API endpoints build time पर prerender होते हैं। Server adapter जोड़ने के बाद किसी route में export const prerender = false लिखकर request-time rendering चुना जा सकता है।

---
// src/pages/docs/[slug].astro
export async function getStaticPaths() {
  const docs = [
    { slug: "ssr", title: "SSR guide" },
    { slug: "ssg", title: "SSG guide" },
  ];

  return docs.map((doc) => ({
    params: { slug: doc.slug },
    props: { doc },
  }));
}

const { doc } = Astro.props;
---

<html lang="hi">
  <body>
    <article>
      <h1>{doc.title}</h1>
      <p>This page was generated at build time.</p>
    </article>
  </body>
</html>

---
// src/pages/account.astro
export const prerender = false;

const session = Astro.cookies.get("session")?.value;
const name = session ? "Masa" : "Guest";

Astro.response.headers.set("Cache-Control", "private, no-store");
---

<html lang="hi">
  <body>
    <h1>Account</h1>
    <p>Hello, {name}.</p>
  </body>
</html>

Astro में common failure adapter भूलना है। Local पर page ठीक लग सकता है, लेकिन production में on-demand rendering के लिए server runtime चाहिए। Claude Code से astro.config.mjs, deploy platform और हर prerender override check करवाएं।

Verification commands और prompt

Rendering strategy को सिर्फ code पढ़कर verify नहीं किया जा सकता। Build output, response headers, cache logs और TTFB/LCP जैसे metrics देखें। Next.js ISR docs भी production behavior के लिए next build और next start से test करने को कहते हैं।

# Next.js: production behavior
npm run build
npm run start

# In another terminal
curl -I http://localhost:3000/catalog/1
curl -I http://localhost:3000/products/1

# ISR cache debugging
NEXT_PRIVATE_DEBUG_CACHE=1 npm run start

# Astro
npm run build
npm run preview

Claude Code prompt में सिर्फ code नहीं, decision record भी मांगें:

Goal: classify every route in a Next.js/Astro site as SSR, SSG, ISR, or static export.

Inspect:
- app/ or src/pages/ routes
- cookies(), headers(), searchParams, connection(), cache: "no-store"
- generateStaticParams(), revalidate, output: "export", Astro prerender
- monetization pages, member pages, articles, product pages, and search pages

Constraints:
- Do not break SEO metadata or internal links
- Keep npm run build passing before and after
- Return a table with the chosen strategy, reason, touched files, and verification command

साफ pitfalls

पहला, user-specific content को static article body में डालना। Member name, private recommendation और hidden price SSG HTML में नहीं होने चाहिए। Article static रखें और personalization को client component या साफ dynamic section में रखें।

दूसरा, ISR interval बहुत छोटा रखना। revalidate = 1 अक्सर server cost वापस ले आता है। Accurate update चाहिए तो on-demand revalidation use करें। Real-time data चाहिए तो SSR चुनें।

तीसरा, static export चुनकर बाद में server features जोड़ना। Auth, cookie-based UI, Server Route Handlers और ISR को runtime चाहिए। Static hosting शानदार है, पर server का replacement नहीं है।

चौथा, Claude Code की fastest-looking सलाह को बिना business check के मान लेना। Monetized content site में performance के साथ OGP, structured data, internal links, ads, CTA tracking, LCP और CLS भी जरूरी हैं। Strategy के बाद Claude Code performance optimization से check करें।

Monetization के साथ recommendation

ClaudeCodeLab जैसे content business में articles, tutorials, comparison pages और funnel entry pages के लिए default SSG रखें। Product lists, category pages और news-like surfaces के लिए ISR रखें। Account, search, cart, checkout context और private request data वाले routes के लिए SSR रखें।

Practical workflow शुरू करने के लिए free Claude Code cheatsheet लें। Templates और implementation packs के लिए products page देखें। Team को route strategy, permissions, code review, analytics और rollout training चाहिए तो Claude Code training and consultation अगला step है।

मैंने वास्तव में क्या verify किया

इस update के लिए मैंने official Next.js Dynamic Route Segments, connection, ISR, Static Exports, Astro on-demand rendering और Claude Code overview docs देखे। Masa के content workflow में सबसे stable split था: articles के लिए SSG, products और categories के लिए ISR, account और search के लिए SSR। Claude Code का सबसे उपयोगी step था code change से पहले route classification table बनवाना। इससे static pages में accidental cookie usage जल्दी पकड़ा गया और review में हर route का reason और verification command साफ दिखा।