SSG | SSR | ISR | CSR | PPR - Nextjs Rednering Methods

Intro

So, I recently moved from React to Next.js. Why? Simple — suna tha fast hai, SEO-friendly hai, aur sabse bada reason, Vercel pe ekdum easily host ho jata hai complete backend+frontend ek sath.

Next.js me code likhne ka main rule h:

Maximize server components, minimize client components.

Agr Client Components hi use krne h, toh directly React use kro, but SEO improvement and server rendering ke liye Nextjs.

SSG - Static Site Generation

Jab tum ek server component bnate ho jo DB se data fetch karta h, to ye by default data build time pr fetch krta h, or fir yhi data hr baar page load hone pr same hi hota h, even if ab DB me data change ho gya ho because it builds the HTML of that component at build time, so baar baar page build nhi ho rha, mtlb baar baar data DB me se fetch bhi nhi hoga sirf ek baar hoga build time pr.

// app/page.tsx
import { getPosts } from "@/lib/db";

export default async function HomePage() {
  const posts = await getPosts(); // runs at build time
  return (
    <main>
      <h1>My Blog</h1>
      {posts.map((p) => (
        <div key={p.id}>{p.title}</div>
      ))}
    </main>
  );
}

ye hi h SSG, fast hota h but stale data show krta h.

But isse SSG se humne data load krke HTML to bna dia but data purana ho skta h, is issue kr liye humare pass SSR h.

SSR - Server Side Rendering

So, it basically let server build new HTML page on each request at server side. Nextjs me tum server component ko force dynamic bna ke SSR kara skte ho

// app/page.tsx
export const dynamic = "force-dynamic"; // forces SSR

import { getPosts } from "@/lib/db";

export default async function HomePage() {
  const posts = await getPosts(); // runs on every request
  return (
    <main>
      <h1>My Blog</h1>
      {posts.map((p) => (
        <div key={p.id}>{p.title}</div>
      ))}
    </main>
  );
}

But what if you want fresh data after some intervals, that's where ISR comes in

ISR - Incremental Static Regeneration

It allows server to generate page at build time, just like SSG. But it sets interval after which page will regenerate.

export const revalidate = 60; // seconds

import { getPosts } from "@/lib/db";

export default async function HomePage() {
  const posts = await getPosts(); // rebuilds every 60 sec
  return (
    <main>
      <h1>My Blog</h1>
      {posts.map((p) => (
        <div key={p.id}>{p.title}</div>
      ))}
    </main>
  );
}

CSR - Client Side Rendering

Ye react ka default tareeka hai, mtlb sirf server ek empty HTML page bhejta h and browser pr page build hota h(mtlb client side pr), through JS bundle and uske baad APIs ke through DB se connect krke data fetch hota h

Pros:

• Server pr Load km pdta h.

• Fast UI updates.

Cons:

• SEO weak because content is not there yet, data will come when user wants.

• First load thoda slow hota h, because page build ho rha h.

"use client"; // forces CSR

import { useEffect, useState } from "react";

export default function Posts() {
  const [posts, setPosts] = useState([]);
  
  useEffect(() => {
    fetch("/api/posts")
      .then((res) => res.json())
      .then(setPosts);
  }, []);

  if(posts.length === 0) return <>Loading...</>
  return (
    <main>
      <h1>My Blog</h1>
      {posts.map((p) => (
        <div key={p.id}>{p.title}</div>
      ))}
    </main>
  );
}

Now there are most of times when your page contains some static part like Hero/About section and some dynamic parts like Live Comments, that time we have PPR.

PPR - Partial Pre Rendering

It is new but in this we load content on server as much as we can through SSG/ISR and load the rest dynamic part with either SSR/CSR. So means the static part will load fast, dynamic parts are gonna be fresh and SEO will improve with it.

// app/page.tsx (server component)
import LiveComments from "./LiveComments";

export default function BlogPage() {
  return (
    <>
      <StaticContent /> {/* prerendered */}
      <LiveComments />  {/* dynamic */}
    </>
  );
}

Leave Like If You like the Post ❤️ !!