SSR vs SSG: Server-Side Rendering vs Static Site Generation

SSR and SSG are two fundamental pre-rendering strategies that solve critical problems in modern web applications: slow initial loads and poor SEO. Understanding when and how to use each is essential for building performant, user-friendly, and search-optimized React applications.

The Problem: Client-Side Rendering Limitations


// Traditional SPA (Client-Side Rendering)
// ========================================

// Initial HTML from server:
<html>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

// Problems with CSR:
// 1. SEO Issues: Search engine crawlers see empty HTML
// 2. Slow FCP: User sees blank screen until JS loads and executes
// 3. Network dependent: Performance varies with connection speed
// 4. Poor perceived performance: Nothing visible during initial load

// Timeline of CSR:
// 0ms    → HTML loads (empty div)
// 200ms  → JS bundle downloaded
// 400ms  → JS parsed and executed
// 600ms  → React renders
// 800ms  → Data fetched from API
// 1000ms → Content finally visible ❌ Too slow!

// What search engines see:
<div id="root"></div> // No content to index!

The Solution: Pre-Rendering

Pre-rendering means generating HTML on the server before sending it to the client. Both SSR and SSG are pre-rendering strategies, but they differ in when the HTML is generated.

1. Core Concepts - SSR vs SSG

SSR (Server-Side Rendering)


// SSR generates HTML on EVERY REQUEST
// ====================================

// Timeline of SSR:
// 1. User requests /products/123
// 2. Server receives request
// 3. Server runs getServerSideProps
// 4. Server fetches data from database/API
// 5. Server renders React component to HTML
// 6. Server sends fully populated HTML to client
// 7. Browser displays HTML immediately (user sees content)
// 8. Browser downloads and executes JavaScript
// 9. React "hydrates" the page (attaches event listeners)
// 10. Page becomes interactive

// Next.js Pages Router - SSR example
export async function getServerSideProps(context) {
  // This function runs on EVERY request
  // Has access to request-specific data
  
  const { req, res, params, query } = context;
  
  // Can read cookies, headers, session
  const session = await getSession({ req });
  
  if (!session) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }
  
  // Fetch fresh data from database
  const user = await db.users.findOne({ id: session.userId });
  const notifications = await db.notifications.find({ 
    userId: session.userId,
    unread: true 
  });
  
  // Can set custom cache headers
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  );
  
  return {
    props: {
      user: JSON.parse(JSON.stringify(user)), // Must be serializable
      notifications,
    },
  };
}

function Dashboard({ user, notifications }) {
  // User sees this HTML immediately
  return (
    <div>
      <h1>Welcome back, {user.name}!</h1>
      <p>You have {notifications.length} unread notifications</p>
    </div>
  );
}

export default Dashboard;

// What the browser receives:
<html>
  <body>
    <div>
      <h1>Welcome back, John!</h1>
      <p>You have 3 unread notifications</p>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

// Characteristics of SSR:
// ✅ Always fresh data
// ✅ Access to request context (cookies, headers, query params)
// ✅ User-specific content
// ✅ SEO-friendly HTML
// ❌ Higher Time to First Byte (TTFB) - server must fetch and render
// ❌ Server load increases with traffic
// ❌ Difficult to cache (user-specific or frequently changing)

SSG (Static Site Generation)


// SSG generates HTML at BUILD TIME (once)
// ========================================

// Timeline of SSG:
// BUILD TIME (developer runs 'next build'):
// 1. Next.js runs getStaticProps
// 2. Fetches data from CMS/database
// 3. Renders React component to HTML
// 4. Saves HTML file to disk (.next/server/pages/about.html)
// 5. Build completes

// REQUEST TIME (user visits page):
// 1. User requests /about
// 2. Server sends pre-built HTML file (no code runs!)
// 3. Browser displays HTML immediately
// 4. JavaScript loads and hydrates
// 5. Page becomes interactive

// Next.js Pages Router - SSG example
export async function getStaticProps(context) {
  // This function runs ONCE at build time
  // NO access to request data (no cookies, no session)
  
  // Fetch data from CMS
  const posts = await cms.posts.getAll();
  const categories = await cms.categories.getAll();
  
  // Can access environment variables
  const apiKey = process.env.CMS_API_KEY;
  
  return {
    props: {
      posts,
      categories,
      generatedAt: new Date().toISOString(),
    },
    // Optional: ISR - revalidate every 60 seconds
    revalidate: 60,
  };
}

function BlogIndex({ posts, categories, generatedAt }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <p>Last updated: {generatedAt}</p>
      <nav>
        {categories.map(cat => (
          <a key={cat.id} href={`/category/$ {cat.slug}`}>
            {cat.name}
          </a>
        ))}
      </nav>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <a href={`/posts/$ {post.slug}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default BlogIndex;

// Characteristics of SSG:
// ✅ Extremely fast TTFB (static file from CDN)
// ✅ Highly cacheable
// ✅ Zero server load at request time
// ✅ Cost-effective (no compute per request)
// ✅ SEO-friendly HTML
// ❌ Data can become stale
// ❌ Requires rebuild to update content (unless using ISR)
// ❌ No access to request-time data
// ❌ Build time increases with number of pages

2. Decision Framework: When to Use Each


// Decision Tree for Choosing Rendering Strategy
// ==============================================

// START: Does the page need to be indexed by search engines?
// ├─ NO  → Client-Side Rendering (CSR) is fine
// │        Examples: Admin panel, behind-login dashboards
// │
// └─ YES → Pre-rendering needed (SSR or SSG)
//          ↓
//          Does the content depend on the request (cookies, auth, user)?
//          ├─ YES → SSR
//          │        Examples: User dashboard, personalized feed, cart
//          │
//          └─ NO → Content is public
//                  ↓
//                  How often does the data change?
//                  ├─ Every request → SSR
//                  │                   Examples: Stock ticker, live scores
//                  │
//                  ├─ Frequently (minutes) → SSR or ISR (short revalidate)
//                  │                          Examples: News site, Twitter feed
//                  │
//                  ├─ Occasionally (hours) → SSG + ISR
//                  │                          Examples: Blog, docs, product pages
//                  │
//                  └─ Rarely (days/weeks) → SSG
//                                           Examples: Marketing pages, legal docs

// Practical Examples:

// ✅ Use SSR for:
// - User dashboards (personalized data)
// - E-commerce checkout (session-based)
// - Social media feeds (user-specific, real-time)
// - Search results pages (query-dependent)
// - A/B testing with server-side logic
// - Geolocation-based content

// ✅ Use SSG for:
// - Marketing/landing pages
// - Blog posts and articles
// - Documentation sites
// - About/contact pages
// - Product catalogs (if updated via builds)
// - Event listings

// ✅ Use SSG + ISR for:
// - E-commerce product pages (prices change, but can be 1-5 min stale)
// - News articles (published frequently, but updates aren't instant)
// - Restaurant menus (change occasionally)
// - Job listings (updated throughout the day)

// ✅ Use CSR for:
// - Admin panels (no SEO needed)
// - Data visualization dashboards (behind auth)
// - Real-time chat interfaces
// - Interactive tools/calculators (no SEO value)

// Hybrid Approach - Common Pattern:
// ==================================

function ProductPage({ product }) {
  // Static shell with SSG
  // User-specific data fetched client-side
  
  const [inventory, setInventory] = useState(product.inventory);
  const [userReview, setUserReview] = useState(null);
  
  useEffect(() => {
    // Fetch real-time inventory
    const ws = new WebSocket('wss://api.example.com/inventory');
    ws.onmessage = (e) => setInventory(JSON.parse(e.data));
    
    // Fetch user's review if logged in
    if (session) {
      fetchUserReview(product.id).then(setUserReview);
    }
    
    return () => ws.close();
  }, [product.id]);
  
  return (
    <div>
      {/* Static content - pre-rendered */}
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: $ {product.price}</p>
      
      {/* Dynamic content - client-side */}
      <p>In stock: {inventory} units</p>
      {userReview && <div>Your review: {userReview.text}</div>}
    </div>
  );
}

export async function getStaticProps({ params }) {
  const product = await getProduct(params.id);
  
  return {
    props: { product },
    revalidate: 300, // Update every 5 minutes
  };
}

3. Dynamic Routes with getStaticPaths


// The Challenge: SSG with Dynamic Routes
// =======================================

// For a dynamic route like /posts/[slug], Next.js needs to know
// at build time which slugs exist so it can generate HTML for each.

// File: pages/posts/[slug].js

export async function getStaticPaths() {
  // Fetch all possible slugs
  const posts = await fetch('https://cms.example.com/posts').then(r => r.json());
  
  // Generate path objects
  const paths = posts.map(post => ({
    params: { slug: post.slug },
  }));
  
  // Return paths and fallback behavior
  return {
    paths,
    fallback: 'blocking', // or true / false
  };
}

export async function getStaticProps({ params }) {
  const post = await fetch(`https://cms.example.com/posts/$ {params.slug}`)
    .then(r => r.json());
  
  if (!post) {
    return {
      notFound: true, // Renders 404 page
    };
  }
  
  return {
    props: { post },
    revalidate: 60,
  };
}

function PostPage({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

// Understanding fallback Options
// ===============================

// fallback: false
// ---------------
// Behavior:
// - Only paths returned by getStaticPaths are pre-rendered
// - Any other path → 404 page
// - No on-demand generation

// Use when:
// - Small, predictable number of pages (e.g., 50 blog posts)
// - All pages can be generated at build time
// - Build time is acceptable

// Example: Personal blog with 20 posts

export async function getStaticPaths() {
  const posts = await getAllPosts(); // Returns 20 posts
  
  return {
    paths: posts.map(p => ({ params: { slug: p.slug } })),
    fallback: false, // /posts/unknown-slug → 404
  };
}

// fallback: true
// --------------
// Behavior:
// - Pre-rendered paths serve static HTML immediately
// - Non-pre-rendered paths:
//   1. Show fallback UI (loading state)
//   2. Generate HTML on server
//   3. Cache for future requests
//   4. Replace fallback with real content

// Use when:
// - Large number of pages (e.g., 100,000 products)
// - Can't pre-render everything at build time
// - Willing to show loading state on first visit

// Example: E-commerce with millions of products

export async function getStaticPaths() {
  // Only pre-render top 100 products
  const topProducts = await getTopProducts(100);
  
  return {
    paths: topProducts.map(p => ({ params: { id: p.id.toString() } })),
    fallback: true,
  };
}

function ProductPage({ product }) {
  const router = useRouter();
  
  // Show loading state for non-pre-rendered pages
  if (router.isFallback) {
    return (
      <div>
        <h1>Loading product...</h1>
        <Skeleton />
      </div>
    );
  }
  
  return <div>{product.name}</div>
}

// fallback: 'blocking'
// --------------------
// Behavior:
// - Pre-rendered paths serve static HTML immediately
// - Non-pre-rendered paths:
//   1. Server waits and generates HTML (like SSR)
//   2. Sends complete HTML to client (no loading state)
//   3. Caches for future requests

// Use when:
// - SEO is critical (crawlers shouldn't see loading state)
// - User experience: prefer waiting over loading flash
// - Large number of pages but need full content on first visit

// Example: Documentation site with thousands of pages

export async function getStaticPaths() {
  // Pre-render only main docs pages
  const mainDocs = await getMainDocs();
  
  return {
    paths: mainDocs.map(d => ({ params: { slug: d.slug } })),
    fallback: 'blocking', // Other pages generated on first visit
  };
}

// No need to check isFallback - page waits server-side
function DocPage({ doc }) {
  return <article>{doc.content}</article>;
}

// Comparison Table:
// ================
//
// | Aspect           | false        | true             | 'blocking'      |
// |------------------|--------------|------------------|-----------------|
// | Unknown paths    | 404          | Generate         | Generate        |
// | First visit UX   | N/A          | Loading state    | Wait for HTML   |
// | SEO              | N/A          | ⚠️ Loading flash | ✅ Full content |
// | Build time       | Longest      | Fastest          | Fast            |
// | Use case         | Small sites  | Large sites      | SEO-critical    |

// Advanced: Multi-locale Paths
// =============================

export async function getStaticPaths({ locales }) {
  const posts = await getAllPosts();
  const paths = [];
  
  // Generate paths for each locale
  for (const locale of locales) {
    for (const post of posts) {
      paths.push({
        params: { slug: post.slug },
        locale, // en, es, fr, etc.
      });
    }
  }
  
  return {
    paths,
    fallback: 'blocking',
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPost(params.slug, locale);
  
  return {
    props: { post },
  };
}

4. ISR (Incremental Static Regeneration)


// ISR: The Best of Both Worlds
// =============================

// Problem with pure SSG:
// - Content becomes stale after build
// - Rebuilding entire site for one update is slow
// - Can't update content without redeployment

// Problem with pure SSR:
// - Every request hits server
// - Slow TTFB
// - High server costs

// ISR Solution:
// - Generate static HTML at build time (fast like SSG)
// - Regenerate individual pages in background (fresh like SSR)
// - Serve cached version while updating (no waiting)

// Basic ISR Implementation
// ========================

export async function getStaticProps() {
  const data = await fetchFromCMS();
  
  return {
    props: { data },
    revalidate: 60, // Revalidate at most once every 60 seconds
  };
}

// How ISR Works - Detailed Timeline
// ==================================

// Initial build at 10:00:00 AM:
// - /products/1.html generated with data from CMS
// - Cached on CDN

// Request at 10:00:30 (30 seconds after build):
// 1. User requests /products/1
// 2. CDN serves cached HTML (generated at 10:00:00)
// 3. Response time: ~10ms ✅ Fast

// Request at 10:01:05 (65 seconds after build, past revalidate window):
// 1. User requests /products/1
// 2. Next.js serves STALE cached HTML immediately (~10ms)
// 3. In background, Next.js triggers regeneration:
//    - Fetches fresh data from CMS
//    - Renders new HTML
//    - Replaces cache
// 4. User sees page instantly (doesn't wait for regeneration)
// 5. Next visitor gets fresh HTML

// Request at 10:01:10 (5 seconds later):
// 1. User requests /products/1
// 2. If regeneration finished: serves NEW HTML
//    If regeneration still running: serves OLD HTML
// 3. Response time: ~10ms ✅ Still fast

// Key insight: Users NEVER wait for regeneration
// Worst case: They see data up to {revalidate} seconds old

// Real-World Example: E-commerce Product Page
// ============================================

export async function getStaticProps({ params }) {
  // Fetch product data
  const product = await db.products.findOne({ id: params.id });
  
  // Fetch related products (expensive query)
  const related = await db.products.find({
    category: product.category,
    id: { $ne: product.id }
  }).limit(4);
  
  // Fetch reviews (changes frequently)
  const reviews = await db.reviews.find({
    productId: product.id
  }).limit(10);
  
  return {
    props: {
      product,
      related,
      reviews,
      lastUpdated: new Date().toISOString(),
    },
    revalidate: 300, // 5 minutes
    // Prices can be up to 5 minutes stale - acceptable for most e-commerce
  };
}

function ProductPage({ product, related, reviews, lastUpdated }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>Price: $ {product.price}</p>
      <p>Last updated: {new Date(lastUpdated).toLocaleString()}</p>
      
      <section>
        <h2>Reviews</h2>
        {reviews.map(r => (
          <div key={r.id}>{r.text}</div>
        ))}
      </section>
      
      <section>
        <h2>Related Products</h2>
        {related.map(p => (
          <ProductCard key={p.id} product={p} />
        ))}
      </section>
    </div>
  );
}

// On-Demand Revalidation
// ======================

// Problem: What if content changes and you can't wait for revalidate?
// Solution: Manually trigger revalidation via API route

// Step 1: Create API route
// File: pages/api/revalidate.js

export default async function handler(req, res) {
  // Verify secret to prevent unauthorized revalidation
  if (req.query.secret !== process.env.REVALIDATION_SECRET) {
    return res.status(401).json({ message: 'Invalid token' });
  }
  
  try {
    // Get path to revalidate from request
    const { path } = req.body;
    
    // Trigger revalidation
    await res.revalidate(path);
    
    return res.json({ 
      revalidated: true,
      path,
      timestamp: new Date().toISOString()
    });
  } catch (err) {
    return res.status(500).json({ 
      message: 'Error revalidating',
      error: err.message 
    });
  }
}

// Step 2: Call from CMS webhook
// When content changes in CMS, send POST request

async function onContentUpdate(contentId) {
  const secret = process.env.REVALIDATION_SECRET;
  
  // Revalidate the updated page
  await fetch(`https://yoursite.com/api/revalidate?secret=$ {secret}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      path: `/blog/$ {contentId}`,
    }),
  });
}

// Step 3: Revalidate multiple related pages

export default async function handler(req, res) {
  if (req.query.secret !== process.env.REVALIDATION_SECRET) {
    return res.status(401).json({ message: 'Invalid token' });
  }
  
  try {
    const { productId } = req.body;
    
    // Revalidate product page
    await res.revalidate(`/products/$ {productId}`);
    
    // Revalidate category page
    const product = await getProduct(productId);
    await res.revalidate(`/category/$ {product.category}`);
    
    // Revalidate homepage if featured product
    if (product.featured) {
      await res.revalidate('/');
    }
    
    return res.json({ 
      revalidated: true,
      paths: [
        `/products/$ {productId}`,
        `/category/$ {product.category}`,
        '/'
      ]
    });
  } catch (err) {
    return res.status(500).json({ message: 'Error revalidating' });
  }
}

// ISR vs SSR Performance Comparison
// ==================================

// Scenario: Product page visited 1000 times/hour

// Pure SSR (no caching):
// - Every request: fetch DB + render
// - 1000 requests × 150ms avg = 150 seconds of server time/hour
// - TTFB: 100-300ms
// - Server cost: High (compute per request)

// ISR (revalidate: 300):
// - First request: serve cache (10ms)
// - After 5 min: serve stale + regenerate in background
// - 12 regenerations/hour × 150ms = 1.8 seconds of server time/hour
// - TTFB: 10-50ms (cached)
// - Server cost: Low (12 builds/hour vs 1000 requests)

// Pure SSG (no revalidate):
// - All requests: serve static file
// - TTFB: 5-20ms
// - Server cost: Zero
// - But: Content can be days/weeks old

// Choosing revalidate Value
// ==========================

// revalidate: 1      // Every second - almost real-time, high regeneration
// revalidate: 60     // 1 minute - good for news, social content
// revalidate: 300    // 5 minutes - e-commerce, job listings
// revalidate: 3600   // 1 hour - blog posts, documentation
// revalidate: 86400  // 1 day - rarely changing content

// Consider:
// - How often does data actually change?
// - How stale can data be before it's a problem?
// - How expensive is regeneration (API costs, DB queries)?
// - Traffic patterns (high traffic = more regenerations)

// Fallback Behavior with ISR
// ===========================

export async function getStaticPaths() {
  const topProducts = await getTopProducts(100);
  
  return {
    paths: topProducts.map(p => ({ params: { id: p.id } })),
    fallback: 'blocking',
  };
}

export async function getStaticProps({ params }) {
  const product = await getProduct(params.id);
  
  return {
    props: { product },
    revalidate: 300,
  };
}

// Behavior:
// - Top 100 products: pre-rendered at build time, revalidate every 5 min
// - Other products: generated on first visit, then cached and revalidated
// - Best of all worlds: fast for popular items, on-demand for long tail

5. Hydration - Making Pages Interactive


// Understanding Hydration
// =======================

// Both SSR and SSG send HTML to the client, but the page isn't interactive yet.
// Hydration is the process of React "taking over" the static HTML.

// Timeline of Hydration:

// 1. Server sends HTML (SSR or SSG)
<button id="counter">Count: 0</button>

// 2. Browser displays HTML immediately
// User sees: "Count: 0" button
// But clicking does nothing yet ❌

// 3. JavaScript bundle downloads and parses
// React code is now available

// 4. React hydrates:
// - Attaches event listeners
// - Reconciles virtual DOM with actual DOM
// - Makes components interactive

// 5. Page is now fully interactive ✅
// Clicking button now works

// Example Component

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

// Hydration Process:

// Server-rendered HTML:
<button>Count: 0</button>

// After hydration:
// - onClick handler is attached
// - useState hook is initialized
// - React can track state changes
// - Button is interactive

// Hydration Errors
// =================

// Problem: Server HTML doesn't match client React tree

// ❌ Common mistake: Using browser APIs during render
function BadComponent() {
  // window is undefined during SSR
  const width = window.innerWidth; // Error!
  
  return <div>Width: {width}</div>;
}

// ✅ Solution: Use useEffect for browser APIs
function GoodComponent() {
  const [width, setWidth] = useState(0);
  
  useEffect(() => {
    // Only runs on client
    setWidth(window.innerWidth);
  }, []);
  
  return <div>Width: {width}</div>;
}

// ❌ Hydration mismatch: Different content on server vs client
function BadTimestamp() {
  // Server generates one time, client generates different time
  return <div>{new Date().toISOString()}</div>;
}

// ✅ Solution: suppressHydrationWarning or useEffect
function GoodTimestamp() {
  return <div suppressHydrationWarning>{new Date().toISOString()}</div>;
}

// Or
function GoodTimestamp2({ serverTime }) {
  const [time, setTime] = useState(serverTime);
  
  useEffect(() => {
    setTime(new Date().toISOString());
  }, []);
  
  return <div>{time}</div>;
}

// Optimizing Hydration Performance
// =================================

// 1. Code splitting - reduce JS bundle size
import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <div>Loading...</div>,
  ssr: true, // Still pre-render on server
});

// 2. Defer non-critical hydration
const NonCriticalWidget = dynamic(() => import('./Widget'), {
  ssr: false, // Don't render on server, only on client
});

// 3. Progressive hydration (React 18)
import { lazy, Suspense } from 'react';

const Reviews = lazy(() => import('./Reviews'));

function ProductPage() {
  return (
    <div>
      <ProductInfo /> {/* Hydrates immediately */}
      
      <Suspense fallback={<div>Loading reviews...</div>}>
        <Reviews /> {/* Hydrates when in viewport */}
      </Suspense>
    </div>
  );
}

// Selective Hydration
// ===================

// React 18 introduces selective hydration with Suspense
// Benefits:
// - Page becomes interactive faster
// - Non-critical parts hydrate later
// - User can interact with parts of page before full hydration

function App() {
  return (
    <Layout>
      <Header /> {/* Hydrates first - critical */}
      
      <Suspense fallback={<Spinner />}>
        <Sidebar /> {/* Hydrates when ready - less critical */}
      </Suspense>
      
      <MainContent /> {/* Hydrates first - critical */}
      
      <Suspense fallback={<Spinner />}>
        <Footer /> {/* Hydrates last - least critical */}
      </Suspense>
    </Layout>
  );
}

// User clicks on MainContent while Sidebar is still hydrating:
// - React prioritizes MainContent hydration
// - Sidebar hydration is paused temporarily
// - User doesn't have to wait for entire page

// Measuring Hydration Performance
// ================================

// Use Next.js built-in Web Vitals reporting

// pages/_app.js
export function reportWebVitals(metric) {
  if (metric.label === 'web-vital') {
    console.log(metric);
  }
  
  // Send to analytics
  if (metric.name === 'FCP') {
    // First Contentful Paint - when content appears
  }
  if (metric.name === 'LCP') {
    // Largest Contentful Paint - when main content appears
  }
  if (metric.name === 'FID') {
    // First Input Delay - when page becomes interactive
  }
  if (metric.name === 'TTI') {
    // Time to Interactive - full hydration complete
  }
}

// Best Practices for Hydration
// =============================

// 1. Keep HTML consistent between server and client
// 2. Use suppressHydrationWarning sparingly
// 3. Defer browser-specific code to useEffect
// 4. Minimize JavaScript bundle size
// 5. Use code splitting for heavy components
// 6. Implement progressive hydration for large apps
// 7. Monitor hydration performance with Web Vitals
// 8. Avoid randomness in render (Math.random(), Date.now())

6. Next.js App Router vs Pages Router


// Pages Router (Traditional)
// ==========================

// File: pages/products/[id].js

export async function getServerSideProps({ params }) {
  const product = await getProduct(params.id);
  return { props: { product } };
}

export default function ProductPage({ product }) {
  return <div>{product.name}</div>;
}

// Characteristics:
// - Data fetching at page level only
// - getServerSideProps / getStaticProps / getStaticPaths
// - All-or-nothing rendering
// - Straightforward mental model

// App Router (Modern - Next.js 13+)
// ==================================

// File: app/products/[id]/page.js

// Server Component (default)
async function ProductPage({ params }) {
  // Fetch directly in component
  const product = await getProduct(params.id);
  
  return (
    <div>
      <h1>{product.name}</h1>
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews productId={params.id} />
      </Suspense>
    </div>
  );
}

// Nested data fetching
async function Reviews({ productId }) {
  // This fetches independently
  const reviews = await getReviews(productId);
  return <ReviewList reviews={reviews} />;
}

// Characteristics:
// - Server Components by default
// - Component-level data fetching
// - Streaming with Suspense
// - Nested layouts
// - Parallel data fetching

// Comparison: Same Feature, Different Approaches
// ===============================================

// PAGES ROUTER - Blog post page

// pages/posts/[slug].js
export async function getStaticPaths() {
  const posts = await getAllPosts();
  return {
    paths: posts.map(p => ({ params: { slug: p.slug } })),
    fallback: 'blocking',
  };
}

export async function getStaticProps({ params }) {
  // Sequential fetching - waterfall
  const post = await getPost(params.slug);
  const author = await getAuthor(post.authorId);
  const comments = await getComments(post.id);
  
  return {
    props: { post, author, comments },
    revalidate: 60,
  };
}

function PostPage({ post, author, comments }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>By {author.name}</p>
      <div>{post.content}</div>
      <Comments comments={comments} />
    </article>
  );
}

// APP ROUTER - Same blog post page

// app/posts/[slug]/page.js
async function PostPage({ params }) {
  // Fetch post data
  const post = await fetch(`/api/posts/$ {params.slug}`, {
    next: { revalidate: 60 } // ISR equivalent
  }).then(r => r.json());
  
  return (
    <article>
      <h1>{post.title}</h1>
      
      {/* Author and comments fetch in parallel */}
      <Suspense fallback={<div>Loading author...</div>}>
        <Author authorId={post.authorId} />
      </Suspense>
      
      <div>{post.content}</div>
      
      <Suspense fallback={<div>Loading comments...</div>}>
        <Comments postId={post.id} />
      </Suspense>
    </article>
  );
}

// Parallel fetching in separate components
async function Author({ authorId }) {
  const author = await getAuthor(authorId);
  return <p>By {author.name}</p>;
}

async function Comments({ postId }) {
  const comments = await getComments(postId);
  return <CommentList comments={comments} />;
}

// Streaming SSR
// =============

// Problem with traditional SSR:
// - Must wait for ALL data before sending ANY HTML
// - Slow component blocks entire page
// - Bad user experience

// Timeline without streaming:
// 0ms    → Request received
// 50ms   → Fast data fetched
// 1000ms → Slow data still loading...
// 1500ms → Finally ready, send ALL HTML at once
// User waits 1500ms to see ANYTHING ❌

// Solution: Streaming SSR with Suspense

function Page() {
  return (
    <div>
      <Header /> {/* Fast - sent immediately */}
      
      <Suspense fallback={<ProductSkeleton />}>
        <SlowProduct /> {/* Slow - streams when ready */}
      </Suspense>
      
      <Suspense fallback={<ReviewsSkeleton />}>
        <SlowReviews /> {/* Also slow - streams independently */}
      </Suspense>
    </div>
  );
}

// Timeline with streaming:
// 0ms    → Request received
// 50ms   → Send Header + skeleton HTML
//          User sees something immediately! ✅
// 1000ms → Product data ready, stream product HTML
//          Replaces skeleton
// 1500ms → Reviews data ready, stream reviews HTML
//          Replaces skeleton

// Benefits:
// - Time to First Byte: 50ms instead of 1500ms
// - Progressive rendering: content appears as it's ready
// - Parallel data fetching: components don't block each other

// Server Components vs Client Components
// =======================================

// Server Component (default in App Router)
// - Runs only on server
// - Can access backend resources directly
// - Zero JavaScript sent to client
// - Cannot use hooks or browser APIs

async function ServerComponent() {
  // Direct database access
  const data = await db.query('SELECT * FROM products');
  
  // No JS bundle for this component
  return <div>{data.map(...)}</div>;
}

// Client Component (opt-in with 'use client')
// - Runs on both server (SSR) and client (hydration)
// - Can use hooks, event handlers
// - Adds JavaScript to bundle

'use client';

function ClientComponent() {
  const [count, setCount] = useState(0);
  
  // This component's JS is sent to browser
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

// Mixing Server and Client Components

// app/products/[id]/page.js (Server Component)
async function ProductPage({ params }) {
  const product = await getProduct(params.id);
  
  return (
    <div>
      {/* Server Component - no JS */}
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      
      {/* Client Component - interactive */}
      <AddToCartButton productId={product.id} />
      
      {/* Server Component - fetches data */}
      <Suspense fallback={<Skeleton />}>
        <RelatedProducts categoryId={product.categoryId} />
      </Suspense>
    </div>
  );
}

// Cache Control in App Router
// ============================

// Fetch with caching options
async function getData() {
  // Static - cached indefinitely (like SSG)
  const static = await fetch('https://api.example.com/static', {
    cache: 'force-cache' // default
  });
  
  // Dynamic - never cached (like SSR)
  const dynamic = await fetch('https://api.example.com/dynamic', {
    cache: 'no-store'
  });
  
  // ISR - revalidate periodically
  const isr = await fetch('https://api.example.com/isr', {
    next: { revalidate: 60 } // like getStaticProps with revalidate
  });
  
  return { static, dynamic, isr };
}

// Route Segment Config
// =====================

// Control rendering behavior per route

// app/dashboard/page.js
export const dynamic = 'force-dynamic'; // Always SSR
export const revalidate = 60; // ISR with 60s revalidate

async function DashboardPage() {
  const data = await getData();
  return <div>{data}</div>;
}

// Options:
// dynamic: 'auto' | 'force-dynamic' | 'force-static'
// revalidate: false | 0 | number
// runtime: 'nodejs' | 'edge'

// When to Use App Router vs Pages Router
// =======================================

// Use Pages Router if:
// - Existing project, working well
// - Team unfamiliar with Server Components
// - Need stable, well-documented patterns
// - Simpler mental model preferred

// Use App Router if:
// - New project
// - Need streaming and progressive rendering
// - Want component-level data fetching
// - Building complex layouts with nested routing
// - Want to minimize client-side JavaScript

7. Performance Optimization Strategies


// Measuring Performance
// =====================

// Core Web Vitals - Google's performance metrics

// 1. Largest Contentful Paint (LCP) - When main content loads
// Goal: < 2.5 seconds
// SSG/ISR: ✅ Excellent (content in HTML)
// SSR: ✅ Good (content in HTML, but slower TTFB)
// CSR: ❌ Poor (wait for JS + API)

// 2. First Input Delay (FID) - Time until page is interactive
// Goal: < 100ms
// All: Similar (depends on hydration time)

// 3. Cumulative Layout Shift (CLS) - Visual stability
// Goal: < 0.1
// All: Similar (depends on implementation)

// 4. Time to First Byte (TTFB) - Server response time
// Goal: < 600ms
// SSG/ISR: ✅ Excellent (10-50ms from CDN)
// SSR: ⚠️ Moderate (100-500ms from server)
// CSR: ✅ Good (HTML is small, but content comes later)

// Next.js Built-in Analytics

// pages/_app.js
export function reportWebVitals(metric) {
  // Send to analytics service
  console.log(metric);
  
  // Or use Vercel Analytics
  if (metric.label === 'web-vital') {
    window.gtag('event', metric.name, {
      value: Math.round(metric.value),
      event_label: metric.id,
      non_interaction: true,
    });
  }
}

// Image Optimization
// ==================

import Image from 'next/image';

function ProductCard({ product }) {
  return (
    <div>
      {/* ❌ Regular img - no optimization */}
      <img src={product.image} alt={product.name} />
      
      {/* ✅ Next.js Image - automatic optimization */}
      <Image
        src={product.image}
        alt={product.name}
        width={500}
        height={500}
        // Lazy load images below fold
        loading="lazy"
        // Prioritize above-fold images
        priority={product.featured}
        // Serve modern formats (WebP, AVIF)
        // Responsive sizing
        // CDN caching
      />
    </div>
  );
}

// Font Optimization
// =================

// Next.js 13+ built-in font optimization
import { Inter, Roboto_Mono } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap', // Avoid layout shift
});

const robotoMono = Roboto_Mono({
  subsets: ['latin'],
  weight: ['400', '700'],
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

// Benefits:
// - Fonts self-hosted (no external requests)
// - Automatic subsetting
// - Preloading
// - Zero layout shift

// Code Splitting Strategies
// ==========================

// 1. Dynamic imports for heavy components
import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('./Chart'), {
  loading: () => <ChartSkeleton />,
  ssr: true, // Still pre-render
});

// 2. Skip SSR for client-only components
const ClientOnlyWidget = dynamic(() => import('./Widget'), {
  ssr: false, // Don't render on server
});

// 3. Named exports
const SpecificComponent = dynamic(
  () => import('./Library').then(mod => mod.SpecificComponent)
);

// Bundle Analysis
// ===============

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // config
});

// Run: ANALYZE=true npm run build
// Opens interactive bundle size visualization

// Reducing Bundle Size
// ====================

// 1. Tree-shakeable imports
// ❌ Imports entire library
import _ from 'lodash';

// ✅ Import only what you need
import debounce from 'lodash/debounce';

// 2. Replace large libraries
// ❌ moment.js (large)
import moment from 'moment';

// ✅ date-fns (smaller, tree-shakeable)
import { format } from 'date-fns';

// 3. Lazy load routes
// Automatic in Next.js with file-based routing

// Caching Strategies
// ==================

// 1. CDN caching for SSG/ISR
// Automatically handled by Vercel/hosting platform

// 2. Browser caching
// Set in next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:all*(svg|jpg|png)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

// 3. SWR for client-side caching
import useSWR from 'swr';

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher, {
    revalidateOnFocus: false,
    revalidateOnReconnect: false,
    // Cache for 5 minutes
    dedupingInterval: 300000,
  });
  
  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;
  return <div>Hello {data.name}!</div>;
}

// Prefetching and Preloading
// ===========================

import Link from 'next/link';

function Navigation() {
  return (
    <nav>
      {/* Prefetch on hover (default) */}
      <Link href="/about">About</Link>
      
      {/* Prefetch immediately */}
      <Link href="/products" prefetch={true}>Products</Link>
      
      {/* Don't prefetch */}
      <Link href="/rarely-visited" prefetch={false}>Rare</Link>
    </nav>
  );
}

// Manual prefetching
import { useRouter } from 'next/router';

function Component() {
  const router = useRouter();
  
  useEffect(() => {
    // Prefetch when component mounts
    router.prefetch('/dashboard');
  }, [router]);
}

// Database Query Optimization
// ============================

// ❌ N+1 query problem
export async function getStaticProps() {
  const posts = await db.posts.findMany();
  
  // Fetches author for each post separately (N+1 queries)
  const postsWithAuthors = await Promise.all(
    posts.map(async post => ({
      ...post,
      author: await db.users.findOne({ id: post.authorId }),
    }))
  );
  
  return { props: { posts: postsWithAuthors } };
}

// ✅ Optimized with single query
export async function getStaticProps() {
  // Single query with JOIN
  const posts = await db.posts.findMany({
    include: {
      author: true,
    },
  });
  
  return { props: { posts } };
}

// Parallel Data Fetching
// =======================

// ❌ Sequential fetching (waterfall)
export async function getServerSideProps() {
  const user = await fetchUser(); // Wait
  const posts = await fetchPosts(user.id); // Then wait
  const comments = await fetchComments(user.id); // Then wait
  // Total: 300ms + 200ms + 150ms = 650ms
  
  return { props: { user, posts, comments } };
}

// ✅ Parallel fetching
export async function getServerSideProps() {
  const [user, posts, comments] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchComments(),
  ]);
  // Total: max(300ms, 200ms, 150ms) = 300ms
  
  return { props: { user, posts, comments } };
}

// Edge Runtime
// ============

// Run SSR at CDN edge for lower latency

export const config = {
  runtime: 'edge', // or 'nodejs'
};

export default function Page() {
  return <div>Rendered at the edge!</div>;
}

// Benefits:
// - Lower latency (closer to users)
// - Better geographic distribution
// - Faster TTFB

// Monitoring Performance
// ======================

// 1. Lighthouse CI
// Automate Lighthouse tests in CI/CD

// 2. Real User Monitoring (RUM)
// Track actual user performance

// 3. Next.js Analytics
// Built-in performance tracking

// 4. Custom metrics
export function reportWebVitals(metric) {
  const body = JSON.stringify(metric);
  const url = 'https://analytics.example.com/vitals';
  
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body);
  } else {
    fetch(url, { body, method: 'POST', keepalive: true });
  }
}

8. Common Pitfalls and Solutions


// Pitfall 1: Using Browser APIs in SSR
// =====================================

// ❌ Crashes during SSR
export async function getServerSideProps() {
  const token = localStorage.getItem('token'); // ReferenceError: localStorage is not defined
  return { props: {} };
}

function Component() {
  const width = window.innerWidth; // ReferenceError: window is not defined
  return <div>{width}</div>;
}

// ✅ Solution: Check environment
export async function getServerSideProps({ req }) {
  // Use cookies instead of localStorage on server
  const token = req.cookies.token;
  return { props: {} };
}

function Component() {
  const [width, setWidth] = useState(0);
  
  useEffect(() => {
    // Browser APIs only in useEffect
    setWidth(window.innerWidth);
    
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return <div>{width || 'Loading...'}</div>;
}

// Or use type checking
if (typeof window !== 'undefined') {
  // Browser-only code
}

// Pitfall 2: Non-Serializable Props
// ==================================

// ❌ Functions, Dates, undefined not serializable
export async function getServerSideProps() {
  return {
    props: {
      date: new Date(), // Becomes string
      callback: () => {}, // ❌ Error!
      missing: undefined, // ❌ Omitted
      data: {
        nested: undefined, // ❌ Omitted
      },
    },
  };
}

// ✅ Solution: Use JSON-safe data
export async function getServerSideProps() {
  return {
    props: {
      dateString: new Date().toISOString(), // ✅ String
      data: {
        value: 'present', // ✅ Defined
      },
    },
  };
}

function Page({ dateString }) {
  const date = new Date(dateString); // Convert back on client
  return <div>{date.toLocaleDateString()}</div>;
}

// Pitfall 3: Hydration Mismatches
// ================================

// ❌ Server and client render differently
function BadComponent() {
  return (
    <div>
      Generated at: {new Date().toISOString()}
      {/* Server generates one time, client generates different time */}
    </div>
  );
}

// ✅ Solution 1: Suppress hydration warning
function Component({ serverTime }) {
  return (
    <div suppressHydrationWarning>
      Generated at: {new Date().toISOString()}
    </div>
  );
}

// ✅ Solution 2: Use server value, update on client
function Component({ serverTime }) {
  const [time, setTime] = useState(serverTime);
  
  useEffect(() => {
    setTime(new Date().toISOString());
  }, []);
  
  return <div>Generated at: {time}</div>;
}

// ✅ Solution 3: Only render on client
function Component() {
  const [mounted, setMounted] = useState(false);
  
  useEffect(() => {
    setMounted(true);
  }, []);
  
  if (!mounted) return null;
  
  return <div>{new Date().toISOString()}</div>;
}

// Pitfall 4: Infinite Revalidation Loop
// ======================================

// ❌ Object in getStaticProps causes infinite loop
export async function getStaticProps() {
  return {
    props: {
      config: {
        // New object every build = always different = infinite revalidation
        timestamp: Date.now(),
      },
    },
    revalidate: 10,
  };
}

// ✅ Solution: Use stable data
export async function getStaticProps() {
  const config = await getConfig(); // Fetch from stable source
  
  return {
    props: {
      config,
    },
    revalidate: 10,
  };
}

// Pitfall 5: Large Page Props
// ============================

// ❌ Sending huge data as props
export async function getServerSideProps() {
  const allProducts = await db.products.findMany(); // 10,000 products
  
  return {
    props: {
      products: allProducts, // ❌ Props embedded in HTML, massive page size
    },
  };
}

// ✅ Solution: Paginate
export async function getServerSideProps({ query }) {
  const page = parseInt(query.page) || 1;
  const perPage = 20;
  
  const products = await db.products.findMany({
    skip: (page - 1) * perPage,
    take: perPage,
  });
  
  return {
    props: {
      products,
      page,
    },
  };
}

// Or use client-side fetching for large datasets
function ProductList() {
  const { data, error } = useSWR('/api/products', fetcher);
  
  if (error) return <div>Error loading</div>;
  if (!data) return <div>Loading...</div>;
  
  return <div>{data.map(...)}</div>;
}

// Pitfall 6: Forgetting to Handle Loading States
// ===============================================

// ❌ No loading state for fallback
export async function getStaticPaths() {
  return {
    paths: [],
    fallback: true,
  };
}

function Page({ post }) {
  // If fallback, post is undefined → crash
  return <div>{post.title}</div>; // ❌ Cannot read property 'title' of undefined
}

// ✅ Solution: Check for fallback
function Page({ post }) {
  const router = useRouter();
  
  if (router.isFallback) {
    return <div>Loading...</div>;
  }
  
  if (!post) {
    return <div>Post not found</div>;
  }
  
  return <div>{post.title}</div>;
}

// Pitfall 7: Not Handling Errors
// ===============================

// ❌ No error handling
export async function getServerSideProps({ params }) {
  const post = await getPost(params.id); // What if this fails?
  
  return {
    props: { post },
  };
}

// ✅ Solution: Handle errors gracefully
export async function getServerSideProps({ params }) {
  try {
    const post = await getPost(params.id);
    
    if (!post) {
      return {
        notFound: true, // Shows 404 page
      };
    }
    
    return {
      props: { post },
    };
  } catch (error) {
    console.error('Error fetching post:', error);
    
    // Could redirect to error page
    return {
      redirect: {
        destination: '/error',
        permanent: false,
      },
    };
    
    // Or return error state
    return {
      props: {
        error: 'Failed to load post',
      },
    };
  }
}

// Pitfall 8: Cache Headers on SSR
// ================================

// ❌ No caching - every request hits server
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

// ✅ Solution: Set cache headers for public content
export async function getServerSideProps({ res }) {
  const data = await fetchData();
  
  // Cache for 60 seconds on CDN
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=60, stale-while-revalidate=120'
  );
  
  return { props: { data } };
}

// Pitfall 9: Mixing SSR and SSG
// ==============================

// ❌ Can't use both on same page
export async function getServerSideProps() {
  return { props: {} };
}

export async function getStaticProps() { // ❌ Error!
  return { props: {} };
}

// ✅ Choose one per page, mix across site
// pages/index.js → SSG
// pages/dashboard.js → SSR
// pages/products/[id].js → SSG + ISR

// Pitfall 10: Stale Data Assumptions
// ===================================

// ❌ Assuming ISR data is always fresh
export async function getStaticProps() {
  return {
    props: {
      price: await getCurrentPrice(),
    },
    revalidate: 3600, // 1 hour
  };
}

// User sees price that could be 1 hour old!
// For critical data, show freshness indicator

function ProductPage({ price, lastUpdated }) {
  return (
    <div>
      <p>Price: $ {price}</p>
      <small>As of {new Date(lastUpdated).toLocaleString()}</small>
    </div>
  );
}

// Or fetch critical data client-side
function ProductPage({ product }) {
  const [currentPrice, setCurrentPrice] = useState(product.price);
  
  useEffect(() => {
    // Get real-time price
    fetchCurrentPrice(product.id).then(setCurrentPrice);
  }, [product.id]);
  
  return (
    <div>
      <p>Price: $ {currentPrice}</p>
    </div>
  );
}

9. Real-World Architecture Examples


// E-commerce Platform Architecture
// =================================

// Homepage
// pages/index.js - SSG
export async function getStaticProps() {
  const featured = await getFeaturedProducts();
  const categories = await getCategories();
  
  return {
    props: { featured, categories },
    revalidate: 3600, // Update hourly
  };
}

// Category Pages
// pages/category/[slug].js - SSG + ISR
export async function getStaticPaths() {
  const categories = await getCategories();
  
  return {
    paths: categories.map(c => ({ params: { slug: c.slug } })),
    fallback: 'blocking',
  };
}

export async function getStaticProps({ params }) {
  const products = await getProductsByCategory(params.slug);
  
  return {
    props: { products },
    revalidate: 600, // 10 minutes
  };
}

// Product Pages
// pages/products/[id].js - SSG + ISR + on-demand revalidation
export async function getStaticPaths() {
  // Pre-render top 1000 products
  const topProducts = await getTopProducts(1000);
  
  return {
    paths: topProducts.map(p => ({ params: { id: p.id } })),
    fallback: 'blocking', // Generate others on-demand
  };
}

export async function getStaticProps({ params }) {
  const product = await getProduct(params.id);
  const related = await getRelatedProducts(params.id);
  
  return {
    props: { product, related },
    revalidate: 300, // 5 minutes
    // Also trigger via webhook when price changes
  };
}

// Shopping Cart
// pages/cart.js - SSR (user-specific)
export async function getServerSideProps({ req }) {
  const session = await getSession({ req });
  
  if (!session) {
    return { redirect: { destination: '/login', permanent: false } };
  }
  
  const cart = await getCart(session.userId);
  
  return {
    props: { cart },
  };
}

// Checkout
// pages/checkout.js - SSR (session + payment)
export async function getServerSideProps({ req, res }) {
  const session = await getSession({ req });
  
  if (!session) {
    return { redirect: { destination: '/login', permanent: false } };
  }
  
  // Don't cache checkout page
  res.setHeader('Cache-Control', 'private, no-cache, no-store, must-revalidate');
  
  const cart = await getCart(session.userId);
  const addresses = await getUserAddresses(session.userId);
  
  return {
    props: { cart, addresses },
  };
}

// Order History
// pages/orders.js - SSR (user-specific)
export async function getServerSideProps({ req }) {
  const session = await getSession({ req });
  
  if (!session) {
    return { redirect: { destination: '/login', permanent: false } };
  }
  
  const orders = await getUserOrders(session.userId);
  
  return {
    props: { orders },
  };
}

// SaaS Application Architecture
// ==============================

// Landing Page
// pages/index.js - SSG
export async function getStaticProps() {
  const testimonials = await getTestimonials();
  const pricing = await getPricing();
  
  return {
    props: { testimonials, pricing },
    revalidate: 86400, // Daily
  };
}

// Documentation
// pages/docs/[...slug].js - SSG + on-demand revalidation
export async function getStaticPaths() {
  const docs = await getAllDocs();
  
  return {
    paths: docs.map(d => ({ params: { slug: d.slug.split('/') } })),
    fallback: 'blocking',
  };
}

export async function getStaticProps({ params }) {
  const doc = await getDoc(params.slug.join('/'));
  
  return {
    props: { doc },
    revalidate: 3600,
    // Trigger revalidation via CMS webhook
  };
}

// App Dashboard (behind login)
// pages/app/dashboard.js - CSR (no SEO needed)
export default function Dashboard() {
  const { data: user } = useSWR('/api/user', fetcher);
  const { data: stats } = useSWR('/api/stats', fetcher);
  const { data: activity } = useSWR('/api/activity', fetcher);
  
  if (!user) return <div>Loading...</div>;
  
  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      {stats && <Stats data={stats} />}
      {activity && <Activity data={activity} />}
    </div>
  );
}

// Alternatively: SSR for initial data
export async function getServerSideProps({ req }) {
  const session = await getSession({ req });
  
  if (!session) {
    return { redirect: { destination: '/login', permanent: false } };
  }
  
  const [user, stats] = await Promise.all([
    getUser(session.userId),
    getStats(session.userId),
  ]);
  
  return {
    props: { user, stats },
  };
}

// Blog/Content Site Architecture
// ===============================

// Blog Index
// pages/blog/index.js - SSG + ISR
export async function getStaticProps() {
  const posts = await getRecentPosts(10);
  const categories = await getCategories();
  
  return {
    props: { posts, categories },
    revalidate: 3600, // Hourly
  };
}

// Blog Post
// pages/blog/[slug].js - SSG + on-demand revalidation
export async function getStaticPaths() {
  const posts = await getAllPosts();
  
  return {
    paths: posts.map(p => ({ params: { slug: p.slug } })),
    fallback: 'blocking',
  };
}

export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);
  const related = await getRelatedPosts(post.tags);
  
  return {
    props: { post, related },
    revalidate: 86400, // Daily
    // Immediate revalidation via CMS webhook on publish
  };
}

// Author Page
// pages/authors/[id].js - SSG + ISR
export async function getStaticPaths() {
  const authors = await getAuthors();
  
  return {
    paths: authors.map(a => ({ params: { id: a.id } })),
    fallback: 'blocking',
  };
}

export async function getStaticProps({ params }) {
  const author = await getAuthor(params.id);
  const posts = await getPostsByAuthor(params.id);
  
  return {
    props: { author, posts },
    revalidate: 3600,
  };
}

// Search Results
// pages/search.js - SSR (query-dependent)
export async function getServerSideProps({ query }) {
  const { q } = query;
  
  if (!q) {
    return { props: { results: [] } };
  }
  
  const results = await searchPosts(q);
  
  // Cache search results briefly
  res.setHeader('Cache-Control', 'public, s-maxage=60');
  
  return {
    props: { results, query: q },
  };
}

// Hybrid Approach: Static Shell + Client Data
// ============================================

// For pages that mix public and private content

export async function getStaticProps() {
  // Public data - pre-rendered
  const globalConfig = await getGlobalConfig();
  const featuredContent = await getFeaturedContent();
  
  return {
    props: {
      globalConfig,
      featuredContent,
    },
    revalidate: 3600,
  };
}

function HybridPage({ globalConfig, featuredContent }) {
  // User data - fetched client-side
  const { data: userData } = useSWR('/api/user', fetcher);
  const { data: recommendations } = useSWR(
    userData ? `/api/recommendations/$ {userData.id}` : null,
    fetcher
  );
  
  return (
    <div>
      {/* Static content - fast initial render */}
      <Header config={globalConfig} />
      <FeaturedSection items={featuredContent} />
      
      {/* Dynamic content - loads after */}
      {userData ? (
        <div>
          <h2>Welcome back, {userData.name}!</h2>
          {recommendations && (
            <Recommendations items={recommendations} />
          )}
        </div>
      ) : (
        <LoginPrompt />
      )}
    </div>
  );
}

10. Best Practices Checklist

Default to SSG: Start with static generation for most pages - it's the fastest and cheapest
Use ISR for freshness: Add revalidate when content needs periodic updates without full rebuilds
Reserve SSR for dynamic needs: Only use getServerSideProps when you need request-time data (auth, cookies, real-time)
Implement on-demand revalidation: Set up webhooks from CMS to trigger instant updates for critical content changes
Choose fallback wisely: Use 'blocking' for SEO-critical pages, true for large sites with acceptable loading states
Leverage streaming SSR: Use Suspense in App Router for progressive page rendering and better perceived performance
Set appropriate cache headers: Configure Cache-Control on SSR pages to reduce server load for public content
Monitor build output: Analyze next build logs to identify large pages and optimization opportunities
Mix strategies per page: Different pages need different approaches - homepage SSG, dashboard SSR, products ISR
Use environment variables: Configure build-time settings with env vars rather than hardcoding
Handle errors gracefully: Return notFound: true or redirect on errors in data fetching functions
Avoid browser APIs in SSR: Use useEffect for window, document, localStorage access
Keep props serializable: Only return JSON-safe data from getServerSideProps/getStaticProps
Paginate large datasets: Don't pre-render thousands of items - use pagination or virtualization
Test fallback states: Verify loading states work correctly with fallback: true
Check authentication before data: Redirect unauthenticated users in getServerSideProps before expensive queries
Tune revalidate carefully: Too short defeats caching benefits, too long serves stale content
Understand Router differences: Know when to use Pages Router vs App Router based on project needs
Optimize images and fonts: Use Next.js Image component and font optimization features
Measure Core Web Vitals: Track LCP, FID, CLS in production to validate performance gains

React Introduction	Learn Practice
JSX Syntax	Learn Practice
Functional Components	Learn Practice
Class Components	Learn Practice
Component Lifecycle	Learn Practice
UseState Hook	Learn Practice
UseEffect Hook	Learn Practice
Props vs State	Learn Practice
Conditional Rendering	Learn Practice
Lists and Keys	Learn Practice
Event Handling	Learn Practice
React Forms	Learn Practice
Fragments	Learn Practice
React Router Basics	Learn Practice
Context API Basics	Learn Practice