Introduction

In this post, I'll explain the different web rendering strategies, how they work, and which one to choose.

🖥️ Client Side Rendering (CSR)

It's the default rendering strategy in React applications. Here, pages get built directly in the browser using JavaScript.

All logic, data fetching, templating, and routing are handled on the client, not on the server.
It's the default rendering strategy in React applications. Here, pages get built directly in the browser using JavaScript.

Pros

• Fast changes: The user sees updates instantly.

• Less server work: The Server just sends JavaScript, and the browser does the rest.

Cons

• Slow at first load: Browser has to download and run JavaScript first.

• Bad for SEO: Search engines can't understand JavaScript pages well.

• Needs a good device: Old or slow devices might experience delays or other performance issues.

🌐 Server Side Rendering (SSR)

It's when the server creates your site's content before it's sent to the browser. It creates the entire HTML of a page. This is a common feature in Next.js.

All logic, data fetching, templating, and routing are handled on the server, not on the client.

Pros

• Quick Display: Pages show up fast because the server does the work beforehand.

• SEO Boost: Search engines can read and understand these pages easier.

• Device Friendly: The server does the hard work, so your device doesn't have to.

• Fast First Load: Pages load quickly the first time because they're pre-made on the server.

Cons

• Server Load: The server has to work a lot, which might slow it down.

• Potential Delays: You could see some lag if the server is slow or far away.

• Full Page Reloads: Changes or new pages mean waiting for a whole page to load again.

• Complex Caching: Managing pre-rendered pages in cache gets tricky.

🏗️ Static Site Generation (SSG)

It means your web page is built once and served as a static file (like HTML). It's often used with site generators like Astro or Gatsby.

Everything is prepared at build time, so there's no extra loading or processing when a user visits your page.

Pros

• Fast Load: Static files load quickly, making your site speedy for users.

• SEO Friendly: Static HTML pages are easily read and indexed by search engines.

• Security: Static sites have fewer security risks as they don't need a database or server-side processing.

• Cheap Hosting: Light, static files cost less to host compared to dynamic sites.

Cons

• Interaction Limits: It's hard to handle live updates or respond to user actions.

• Rebuild Needed: Any update means rebuilding and redeploying the entire site.

• Not for Large Sites: Managing thousands of pages can be complex and slow.

• No Real-time Content: All content needs to be available at build time, making real-time updates challenging.

Summary

Web rendering strategies decide how a website renders its content.
Pick CSR for highly interactive applications, SSR for data-heavy websites requiring SEO, and SSG for content-heavy sites that don't often need updates.