DEV Community

loading...
Cover image for Day 32 of #100DaysOfCode: The difference between CSR, SSR, Pre-rendering, and Static SSR

Day 32 of #100DaysOfCode: The difference between CSR, SSR, Pre-rendering, and Static SSR

jenhsuan profile image Jen-Hsuan Hsieh Updated on ・3 min read

Introduction

This topic is a quick note for understand the difference between CSR, SSR, Pre-rendering, and Static SSR.

Most of the definitions in this topic refer to Google's blog. I recommend you read Google's blog directly for details.

Terminology

  • TTFB: Time to First Byte - seen as the time between clicking a link and the first bit of content coming in.
  • FCP: First Contentful Paint - the time when requested content (article body, etc) becomes visible.
  • TTI: Time To Interactive - the time at which a page becomes interactive (events wired up, etc).

Full Client-Side Rendering (CSR)

Client-side rendering (CSR) means rendering pages directly in the browser using JavaScript. All logic, data fetching, templating and routing are handled on the client rather than the server.

Definition

  • The server renders HTML without data and the page is allowed users to interact with it when JavaScript execute completely

Why we need CSR?

  1. The server no longer have to generate and render full HTML for reach request
  2. Reduce the loading for the server-side

Downsides

  1. The amount of JavaScript required tends to grow as an application grows. (low TTI for the first page)
  2. Poor SEO

Ways to improve performance:

  1. Aggressive code-splitting
  2. lazy-load JavaScript
  3. Pre-rendering

Alt Text

Server-Side Rendering (SSR)

Server rendering generates the full HTML for a page on the server in response to navigation. This avoids additional round-trips for data fetching and templating on the client, since it’s handled before the browser gets a response.

Definition

  • The server renders full HTML (faster TTI)

Downsides

  • The server has to generate pages on the fly and it result in a slower Time to First Byte (TTFB).

Alt Text

Static SSR

Unlike Server Rendering, it also manages to achieve a consistently fast Time To First Byte, since the HTML for a page doesn’t have to be generated on the fly. Generally, static rendering means producing a separate HTML file for each URL ahead of time.

Alt Text

CSR with Pre-rendering

It’s important to understand the difference between static rendering and prerendering: static rendered pages are interactive without the need to execute much client-side JS, whereas prerendering improves the First Paint or First Contentful Paint of a Single Page Application that must be booted on the client in order for pages to be truly interactive.

Implementations

Next.js

Next.js provides two kinds of ways for pre-rendering

  1. Static Generation (Recommended): The HTML is generated at build time and will be reused on each request.
  2. Server-side Rendering: The HTML is generated on each request.

Alt Text

That's it!

Summary

Alt Text

Articles

There are some of my articles. Feel free to check if you like!

References

Discussion (0)

pic
Editor guide