Mastering Web Rendering: CSR, SSR, SSG, ISR & Edge Strategies

Modern web development offers a variety of rendering techniques to optimize performance, SEO, and user experience. In this post, we’ll explore the main types of rendering: Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR). We’ll discuss how each works, when to use them, and real-world examples.

1. Client-Side Rendering (CSR)

How it works

• The browser loads a minimal HTML shell and downloads JavaScript bundles.
• JavaScript executes to build and render the UI dynamically on the client.

Pros

• Rich interactivity and complex client logic.
• Reduced server load once the initial bundle is delivered.

Cons

• Slower initial load: heavy JS parsing and execution.
• Poor SEO unless additional setup (e.g., prerendering) is used.

Use Cases & Examples

• Single-page applications (SPAs) using React, Vue, or Angular.
• Admin dashboards and complex client-heavy tools.

// Example (React):
import React from 'react';

export default function App() {
  const [data, setData] = React.useState(null);
  
  React.useEffect(() => {
    // Fetch data on the client side
    fetch('/api/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      <h1>Welcome to a client-rendered app!</h1>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

2. Server-Side Rendering (SSR)

How it works

• The server generates full HTML for each request and sends it to the client.
• Client receives rendered HTML and hydrates into a JavaScript-powered app.

Pros

• Faster initial paint and content visibility.
• Better SEO out of the box, since crawlers see full HTML.

Cons

• Increased server load: HTML must be regenerated per request.
• Potential latency if the server is under heavy traffic or distant from user.

Use Cases & Examples

• Content-driven websites (news, blogs) wanting up-to-date data.
• E-commerce sites needing SEO and dynamic personalization.

// Example (Next.js):
export async function getServerSideProps(context) {
  // Fetch data on each request
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  
  return { 
    props: { data } 
  };
}

export default function Page({ data }) {
  return (
    <div>
      <h1>Server-Side Rendered Content</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

3. Static Site Generation (SSG)

How it works

• HTML pages are pre-rendered at build time into static files.
• Files are served from a CDN or static host.

Pros

• Extremely fast delivery via CDN; minimal server work.
• Good SEO: content is present in static HTML.

Cons

• Build time grows with site size.
• Rebuilding needed for content updates.

Use Cases & Examples

• Documentation, marketing sites, blogs with infrequent updates.

// Example (Next.js):
export async function getStaticProps() {
  const posts = await fetchAllPosts();
  return { 
    props: { 
      posts,
      lastUpdated: new Date().toISOString()
    } 
  };
}

export default function Blog({ posts, lastUpdated }) {
  return (
    <div>
      <h1>My Blog</h1>
      <p>Last updated: {new Date(lastUpdated).toLocaleString()}</p>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.excerpt}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

4. Incremental Static Regeneration (ISR)

How it works

• Combines SSG speed with dynamic updates by regenerating pages on demand.
• Define a revalidation interval; pages older than the interval are regenerated at the next request.

Pros

• Fast static performance with up-to-date data.
• Scales well for large sites without full rebuilds.

Cons

• Slight complexity in implementation.
• Potential stale content window until regeneration.

Use Cases & Examples

• E-commerce product catalogs, news sites that update periodically.

// Example (Next.js):
export async function getStaticProps({ params }) {
  const product = await fetchProduct(params.id);
  
  if (!product) {
    return {
      notFound: true,
    };
  }

  return {
    props: { product },
    // Re-generate the page at most once every 60 seconds
    revalidate: 60,
  };
}

export async function getStaticPaths() {
  const products = await fetchAllProductIds();
  
  return {
    paths: products.map((product) => ({
      params: { id: product.id },
    })),
    fallback: 'blocking',
  };
}

export default function Product({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
    </div>
  );
}

5. Edge Rendering & Hybrid Approaches

Edge Rendering

• Running SSR or ISR at edge locations (CDN PoPs) for even lower latency.
• Example: Vercel Edge Functions, Cloudflare Workers.

Hybrid Approaches

• Mix and match CSR, SSR, and SSG per page or component.
• Example: Next.js App Router with different rendering strategies per route.

// Example (Next.js App Router with hybrid rendering)
// app/page.js - SSG by default
export default function Home() {
  return <h1>Welcome to our hybrid app!</h1>;
}

// app/dashboard/page.js - Client Component with CSR
'use client';

export default function Dashboard() {
  const [data, setData] = React.useState(null);
  
  React.useEffect(() => {
    fetch('/api/dashboard')
      .then(res => res.json())
      .then(setData);
  }, []);
  
  return <DashboardLayout data={data} />;
}

Selecting the Right Strategy

Key Takeaways

1. SEO-critical content → SSR or SSG
2. Highly interactive dashboards → CSR with hydration
3. Large-scale sites needing freshness → ISR or Edge Rendering
4. Global audience → Edge Rendering for reduced latency

Conclusion

Modern web development offers powerful rendering strategies to optimize for different use cases. Frameworks like Next.js, Nuxt.js, and SvelteKit make it easy to combine these strategies within a single application. The key is to understand your application’s requirements and choose the right rendering strategy for each part of your app.

Start by identifying your key pages’ needs and experiment with different rendering modes to find the best balance between performance, SEO, and developer experience.

Happy coding! 🚀