✅ Next.js Rendering Cheat Sheet

#programming #javascript #ai #nextjs

🔹 SSG (Static Site Generation)

Pre-renders the page at build time into static HTML for fast performance.

🔹 ISR (Incremental Static Regeneration)

Regenerates static pages in the background at a set interval or trigger.

🔹 SSR (Server-Side Rendering)

Renders the page on every request with fresh, dynamic data on the server.

🔹 CSR (Client-Side Rendering)

Loads a blank shell and fetches/render content in the browser after load.

💥 Rendering Modes Overview

🚀 Quick Setup Guide
✅ SSG – Default in App Router

// app/page.tsx
export const revalidate = 3600; // Optional: Regenerate every 1 hour

export default async function Page() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return <div>{posts.length} posts</div>;
}

🔁 ISR – Add revalidation interval

export const revalidate = 60; // Rebuild page every 60 seconds

🔄 SSR – Always fetch fresh data

export const dynamic = 'force-dynamic'; // or use cache: 'no-store'

const data = await fetch('https://api.example.com/stats', {
  cache: 'no-store'
});

🌐 CSR – Client-only rendering

'use client';

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);

  return <pre>{JSON.stringify(data)}</pre>;
}

🧭 When to Use What
📝 Static content? → SSG
🔁 Refresh every few minutes? → ISR
👤 Authenticated or real-time data? → SSR
🧩 Fully interactive UI? → CSR

📌 Final Tips
✅ SSG is the default in App Router (unless you disable caching)
⚠️ Use 'use client' only when absolutely necessary
🔀 Mix & match strategies: server-rendered pages + client components = ⚡ powerful UX
🎯 Are you using the right rendering strategy in your Next.js apps?

If this helped, feel free to save, share, or comment!