In this article, I'll break down these rendering methods in simple terms, and I want you to think about what each method does and why it’s used.

Client-Side Rendering (CSR)

This approach renders the entire application on the client side, in the browser.

The browser receives JavaScript and runs it to display the website.

CSR can create issues, such as reduced SEO because search engines may struggle to read the content. Also, users without JavaScript enabled won’t see the website, as they’ll encounter a “You need to enable JavaScript to use this website” message. Essentially, CSR offloads all rendering work to the browser.

Server-Side Rendering (SSR)

As the name suggests, SSR performs rendering on the server. Here, JavaScript code runs on a backend server, pre-renders the page, and then sends it to the client.

This way, some code runs on the server while other code runs in the browser. In JavaScript frameworks, Next.js (for React) and Nuxt.js (for Vue) enable SSR.

SSR solves many CSR issues by providing a fully-rendered HTML document, which improves SEO and allows users to see content even if JavaScript is disabled.

Traditional backend frameworks have used SSR for years and has always been standard, so the “CSR problem” was introduced by modern JavaScript frameworks and later solved by SSR.

Static Site Generation (SSG)

SSG generates HTML pages ahead of time. It builds the HTML once and serves it. Since there’s no dynamic server processing, you can host SSG pages on any static file server.

Incremental Static Generation (ISG)

ISG builds static pages initially, like SSG. But when data changes, it triggers a rebuild of updated pages, which are then swapped in automatically. In this way, ISG keeps pages up to date by regenerating only the parts that change. In the simplest terms, Incremental Static Generation (ISG) works by comparing two builds and only releasing the HTML pages that have changed. This way, it updates just the necessary parts of the website without rebuilding everything.

To summarize:

  • CSR: Runs JavaScript entirely in the browser and may cause issues with SEO and accessibility.
  • SSR: Resolves CSR’s issues by rendering on the server, similar to traditional backend.
  • SSG: Generates plain HTML pages
  • ISG: Uses SSG but rebuilds updated pages as data changes.

Thoughts to think about—skip this part if you don’t like to.

  1. Should we still choose any meta framework over plain HTML if our goal is simply to end up with static HTML pages?
  2. Do we really need to add extra steps just to get good old, traditional, plain static HTML?
  3. Should we still need to choose the meta framework for every website?
  4. When and why should we use the meta framework?