Rendering Strategies

CSR vs SSR vs SSG

Three main rendering approaches for web applications.

Client-Side Rendering (CSR)

Server → Empty HTML + JavaScript → Browser renders

// React SPA (CSR)
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Pros:

• Simple deployment
• Rich interactions
• Better caching

Cons:

• Slow initial load
• Poor SEO
• Blank screen while loading

Server-Side Rendering (SSR)

Server → Rendered HTML → Browser hydrates

// Next.js SSR
export async function getServerSideProps() {
  const data = await fetchProducts();
  return { props: { data } };
}

export default function Products({ data }) {
  return <ProductList products={data} />;
}

Pros:

• Fast initial load
• Good SEO
• Works without JavaScript

Cons:

• Server load
• Complex deployment
• Slower TTFB

Static Site Generation (SSG)

Build time → Static HTML → Served from CDN

// Next.js SSG
export async function getStaticProps() {
  const data = await fetchProducts();
  return { props: { data } };
}

export default function Products({ data }) {
  return <ProductList products={data} />;
}

Pros:

• Fastest performance
• Great SEO
• Easy to scale

Cons:

• Build time generation
• Not for real-time data
• Rebuild needed for updates

Choosing a Strategy

Decision Matrix

Content Type	Strategy	Example
Static marketing	SSG	Landing pages
Blog posts	SSG/ISR	Documentation
User dashboard	CSR	Admin panels
Product pages	SSR/ISR	E-commerce
Real-time data	CSR	Stock prices
Personalized	SSR	User profiles

When to Use Each

Use CSR when:

• App is behind authentication
• Content is highly dynamic
• SEO doesn't matter
• Rich interactions needed

Use SSR when:

• SEO is critical
• Content changes frequently
• Personalization needed
• First load performance matters

Use SSG when:

• Content is mostly static
• Performance is critical
• High traffic expected
• Content changes infrequently

Hybrid Approaches

// Next.js: Mix SSR and SSG
// Static pages (SSG)
export async function getStaticProps() {
  return { props: { data: await fetchStaticData() } };
}

// Dynamic pages (SSR)
export async function getServerSideProps(context) {
  return { props: { data: await fetchDynamicData(context.params.id) } };
}

// Incremental Static Regeneration (ISR)
export async function getStaticProps() {
  return {
    props: { data: await fetchProducts() },
    revalidate: 60, // Regenerate every 60 seconds
  };
}

Hybrid Rendering

Combine rendering strategies for optimal performance.

Next.js Hybrid Approach

// pages/products/[id].js

// Static generation for most products
export async function getStaticProps({ params }) {
  const product = await fetchProduct(params.id);
  
  return {
    props: { product },
    revalidate: 3600, // ISR: update every hour
  };
}

export async function getStaticPaths() {
  const products = await fetchPopularProducts();
  
  return {
    paths: products.map(p => ({ params: { id: p.id } })),
    fallback: 'blocking', // SSR for non-pre-rendered paths
  };
}

Route-Based Strategy

// Different strategies per route
const routes = {
  '/': { strategy: 'SSG', revalidate: 3600 },
  '/products': { strategy: 'SSR' },
  '/products/[id]': { strategy: 'ISR', revalidate: 60 },
  '/dashboard': { strategy: 'CSR' },
  '/blog/[slug]': { strategy: 'SSG', revalidate: 86400 },
};

Component-Level Rendering

// Different components, different strategies
function ProductPage({ product }) {
  return (
    <div>
      {/* Static header */}
      <Header />
      
      {/* SSR product info */}
      <ProductInfo product={product} />
      
      {/* CSR reviews (real-time) */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <DynamicReviews productId={product.id} />
      </Suspense>
      
      {/* Static footer */}
      <Footer />
    </div>
  );
}

Benefits of Hybrid Rendering

1. Best of all worlds: SSR for SEO, CSR for interactivity
2. Optimized performance: Each page uses optimal strategy
3. Flexibility: Change strategy per route
4. Cost efficiency: Static pages served from CDN

Frameworks

• Next.js: React (SSG, SSR, ISR)
• Nuxt.js: Vue (SSG, SSR)
• Astro: Multi-framework (Islands)
• Gatsby: React (SSG with plugins)