Next.js 1 - Data Fetching (CSR, SSR, SSG, ISR, PPR)

Next.js provides multiple ways to fetch data, each suited for different use cases. Understanding them helps optimize performance, SEO, and user experience.

1️⃣ Client-Side Rendering (CSR)

• Data is fetched on the client after the page loads.
• SEO is bad because the HTML is empty at first (Google sees a blank page).
• Best for user-specific data (e.g., dashboards, private pages).

Example: Fetching Data with useEffect (CSR)

"use client"; // Required for client-side rendering
import { useState, useEffect } from "react";

export default function CSRPage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      <h1>Client-Side Rendered Data</h1>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
    </div>
  );
}

✅ Pros: Works well for user-specific content (auth-required pages).
❌ Cons: Slower initial load, bad for SEO.

2️⃣ Server-Side Rendering (SSR)

• Data is fetched on each request (server-side).
• Good for real-time data and SEO.
• Slower than SSG because it runs every time a user visits.

Example: Fetching Data with getServerSideProps (SSR)

// app/page.tsx (Server Component)
export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return { props: { data } };
}

export default function SSRPage({ data }) {
  return (
    <div>
      <h1>Server-Side Rendered Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

✅ Pros: Fresh data, SEO-friendly.
❌ Cons: Slower response time, higher server load.

3️⃣ Static Site Generation (SSG)

• Data is fetched at build time and saved as static HTML.
• Super fast (CDN cached).
• Not suitable for frequently changing data.

Example: Fetching Data with getStaticProps (SSG)

// app/page.tsx (Server Component)
export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return { props: { data } };
}

export default function SSGPage({ data }) {
  return (
    <div>
      <h1>Static Site Generated Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

✅ Pros: Super fast, scalable, SEO-friendly.
❌ Cons: Data can become stale.

4️⃣ Incremental Static Regeneration (ISR)

• Like SSG, but allows on-demand updates (no full rebuild).
• Uses revalidate to refresh data at a set interval.
• Great for semi-static pages (e.g., blog posts, product listings).

Example: Using revalidate in ISR

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return { props: { data }, revalidate: 60 }; // Regenerates every 60 seconds
}

✅ Pros: Fast like SSG, but can update without rebuilding the whole site.
❌ Cons: Data is not always 100% fresh.

5️⃣ Partial Prerendering (PPR) – NEW in Next.js 15

• Hybrid approach: Some parts statically pre-rendered, others loaded dynamically.
• Best for e-commerce, personalized content, and dynamic SEO-friendly pages.

Example: Static Header + Dynamic Product List

// app/page.tsx
import { Suspense } from "react";
import Products from "./Products";

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to Our Store</h1>
      <Suspense fallback={<p>Loading products...</p>}>
        <Products />
      </Suspense>
    </div>
  );
}

// app/Products.tsx (Server Component)
export default async function Products() {
  const res = await fetch("https://api.example.com/products");
  const products = await res.json();

  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

✅ Pros: SEO-friendly, fast, handles dynamic data well.
❌ Cons: More complex than SSG or SSR.

6️⃣ When to Use What?

🎯 Conclusion

• Use CSR for user-specific data (dashboards, auth-required pages).
• Use SSR for dynamic content that needs to be fresh (news feeds, search results).
• Use SSG for static pages that don’t change often (marketing pages, blogs).
• Use ISR when you need fast performance + occasional updates.
• Use PPR when you need hybrid rendering (SEO + personalization).

🔥 Next Steps

Would you like a deep dive into React Server Components, caching strategies, or middleware in Next.js 15? 🚀