ssr-ssg-advisor

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:

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

Step 2: Choose Rendering Strategy

Static Site Generation (SSG):

// 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):

// 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):

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