SSR/SSG Advisor

Choose the optimal rendering strategy for Next.js pages based on requirements.

Quick Start

Decision criteria:

SSG: Static content, pre-render at build → Best performance
ISR: Static with updates, revalidate periodically → Balance of both
SSR: Dynamic per-request, personalized → Fresh data
CSR: Client-side only, highly interactive → User-specific

Instructions

Step 1: Analyze Content Requirements

Ask these questions:

Does content change per user? (personalization)
How frequently does content update?
Is SEO critical?
What's the acceptable data freshness?
How many pages need to be generated?

Step 2: Choose Rendering Strategy

Static Site Generation (SSG):

typescript

// pages/products/[id].tsx
export async function getStaticProps({ params }) {
  const product = await fetchProduct(params.id);
  
  return {
    props: { product },
    // Optional: revalidate for ISR
    // revalidate: 60, // seconds
  };
}

export async function getStaticPaths() {
  const products = await fetchAllProducts();
  
  return {
    paths: products.map(p => ({ params: { id: p.id } })),
    fallback: 'blocking', // or false, or true
  };
}

When to use SSG:

Marketing pages
Blog posts
Documentation
Product catalogs (if manageable size)
Any content that doesn't change often

Server-Side Rendering (SSR):

typescript

// pages/dashboard.tsx
export async function getServerSideProps(context) {
  const session = await getSession(context);
  const data = await fetchUserData(session.userId);
  
  return {
    props: { data },
  };
}

When to use SSR:

User dashboards
Personalized content
Real-time data
Content requiring authentication
Frequently changing data

Incremental Static Regeneration (ISR):

typescript

// pages/blog/[slug].tsx
export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  
  return {
    props: { post },
    revalidate: 60, // Regenerate every 60 seconds
  };
}

When to use ISR:

Blog with frequent updates
Product pages with price changes
News sites
Content that updates periodically
Large sites where full rebuild is slow

Client-Side Rendering (CSR):

typescript

'use client'; // App Router

import { useEffect, useState } from 'react';

function Dashboard() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('/api/user-data')
      .then(res => res.json())
      .then(setData);
  }, []);
  
  return <div>{data ? <Content data={data} /> : <Loading />}</div>;
}

When to use CSR:

Highly interactive UIs
User-specific data (after auth)
Real-time updates
SEO not required
Data behind authentication

Step 3: Implement Data Fetching

App Router (Next.js 13+):

typescript

// app/products/page.tsx
async function ProductsPage() {
  // SSG: cached by default
  const products = await fetch('https://api.example.com/products');
  
  // ISR: revalidate periodically
  const products = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 } // 1 hour
  });
  
  // SSR: no caching
  const products = await fetch('https://api.example.com/products', {
    cache: 'no-store'
  });
  
  return <ProductList products={products} />;
}

Pages Router:

typescript

// getStaticProps: SSG/ISR
// getServerSideProps: SSR
// useEffect + fetch: CSR

Step 4: Configure Caching and Revalidation

On-demand revalidation:

typescript

// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(request) {
  const path = request.nextUrl.searchParams.get('path');
  
  if (path) {
    revalidatePath(path);
    return Response.json({ revalidated: true });
  }
  
  return Response.json({ revalidated: false });
}

Tagged caching:

typescript

// Fetch with tags
const data = await fetch('https://api.example.com/products', {
  next: { tags: ['products'] }
});

// Revalidate by tag
revalidateTag('products');

Step 5: Handle Fallback Strategies

getStaticPaths fallback options:

typescript

export async function getStaticPaths() {
  return {
    paths: [...],
    fallback: false,    // 404 for non-pre-rendered paths
    // fallback: true,  // Generate on-demand, show loading
    // fallback: 'blocking', // Generate on-demand, wait for page
  };
}

Common Patterns

Hybrid Approach

typescript

// Mix strategies in same app
// - SSG for marketing pages
// - ISR for blog posts
// - SSR for user dashboard
// - CSR for interactive features

// app/layout.tsx (SSG)
export default function RootLayout({ children }) {
  return <html><body>{children}</body></html>;
}

// app/blog/[slug]/page.tsx (ISR)
async function BlogPost({ params }) {
  const post = await fetch(`/api/posts/${params.slug}`, {
    next: { revalidate: 60 }
  });
  return <Article post={post} />;
}

// app/dashboard/page.tsx (SSR)
async function Dashboard() {
  const data = await fetch('/api/user', { cache: 'no-store' });
  return <DashboardContent data={data} />;
}

Optimistic UI with ISR

typescript

// Show stale data immediately, revalidate in background
export async function getStaticProps() {
  const data = await fetchData();
  
  return {
    props: { data },
    revalidate: 1, // Revalidate every second
  };
}

Conditional Rendering

typescript

// Different rendering based on route
export async function getServerSideProps(context) {
  const { preview } = context;
  
  if (preview) {
    // SSR for preview mode
    const data = await fetchDraftContent();
    return { props: { data, preview: true } };
  }
  
  // Redirect to SSG version
  return {
    redirect: {
      destination: '/static-version',
      permanent: false,
    },
  };
}

Decision Matrix

Requirement	SSG	ISR	SSR	CSR
SEO Critical	✅	✅	✅	❌
Fast TTFB	✅	✅	❌	❌
Fresh Data	❌	⚠️	✅	✅
Personalized	❌	❌	✅	✅
Large Scale	⚠️	✅	✅	✅
Build Time	❌	✅	✅	✅

✅ = Excellent, ⚠️ = Acceptable, ❌ = Poor

Performance Considerations

SSG:

Fastest: Pre-rendered at build time
Best for CDN caching
Long build times for large sites
Stale data until next build

ISR:

Fast initial load (cached)
Automatic updates
Best of both worlds
Slight delay for revalidation

SSR:

Always fresh data
Slower TTFB
Higher server load
Can't be cached at CDN edge

CSR:

Slow initial load
No SEO benefits
Reduces server load
Best for authenticated content

Troubleshooting

Build taking too long:

Use ISR instead of SSG
Reduce number of pre-rendered paths
Use fallback: 'blocking'

Stale data showing:

Reduce revalidate time
Implement on-demand revalidation
Consider SSR for critical data

High server costs:

Move from SSR to ISR where possible
Implement proper caching
Use CDN for static assets

SEO issues:

Avoid CSR for public content
Use SSG or SSR
Implement proper metadata

Best Practices

Start with SSG: Default to static, move to dynamic only when needed
Use ISR for updates: Better than full SSR for most cases
Combine strategies: Different pages can use different methods
Cache aggressively: Use CDN and browser caching
Monitor performance: Track TTFB, build times, server load
Implement fallbacks: Handle errors and loading states
Test thoroughly: Verify behavior in production

ssr-ssg-advisor

NPX Install

Tags

SKILL.md Content

SSR/SSG Advisor

Quick Start

Instructions

Step 1: Analyze Content Requirements

Step 2: Choose Rendering Strategy

Step 3: Implement Data Fetching

Step 4: Configure Caching and Revalidation

Step 5: Handle Fallback Strategies

Common Patterns

Hybrid Approach

Optimistic UI with ISR

Conditional Rendering

Decision Matrix

Performance Considerations

Troubleshooting

Best Practices