Rendering in Web Development: SSR, CSR, SSG, ISR

When you start learning modern web development, you’ll often hear terms like Rendering, Server-Side Rendering, Client-Side Rendering, Static Generation, Hydration, and more. These terms can sound confusing, especially if you think rendering is just "printing content to the browser."

Let’s break these concepts down clearly, with examples you can actually understand and remember.

When web developers talk about rendering, they usually mean:

• Where is the HTML generated? (Server or Browser)
• When is the HTML generated? (Build time or Request time)
• This is more about content preparation, not visual painting.

Types of Rendering

1. Server-Side Rendering (SSR)

HTML is built on the server at request time.
The browser receives fully formed HTML, which is displayed immediately.

Example:
When you visit a blog, the server fetches the blog post from a database, builds the HTML, and sends it to your browser.

Benefits:

✅ Fast first paint

✅ SEO-friendly

✅ Content is always fresh

Drawbacks:

❌ Server load increases

❌ Slower navigation between pages

2. Client-Side Rendering (CSR)

HTML is built inside the browser using JavaScript.
The browser loads a mostly empty HTML page, then JavaScript fetches data and builds the page.

Example:

When you visit a React Single Page Application (SPA), the initial page might just have:

<div id="app"></div>
<script src="app.js"></script>

Then JavaScript builds the page dynamically.

Benefits:

✅ Fast page transitions

✅ Better for app-like experiences

Drawbacks:

❌ Slow initial load (blank screen until JS loads)

❌ Not SEO-friendly by default

3. Static Site Generation (SSG)

HTML is pre-built at build time.
The server just sends the ready-made HTML file to the browser.

Example:

When you build a blog with Next.js or Astro using SSG, the HTML pages are created during the deployment process.

Benefits:

✅ Extremely fast load times

✅ Very low server cost

✅ SEO-friendly

Drawbacks:

❌ Content can become outdated until the site is rebuilt

4. Incremental Static Regeneration (ISR)

HTML is pre-built like static sites but can be updated later.
You set a "revalidate" time to regenerate the page in the background.

Example:

In Next.js:

return {
  props: { post },
  revalidate: 60, // Regenerate this page every 60 seconds
};

Benefits:

✅ Fast static performance

✅ Fresh content without full rebuild

✅ Scales well for large sites

Drawbacks:

❌ Slightly more complex setup

❌ Might serve stale content briefly

Thank You!