1. What is Client-Side Rendering (CSR)?

Client-Side Rendering is the process of rendering only a bare-bones HTML page on the server with the complete page render happening on the browser by downloading and executing all the necessary JavaScript

  • traditionally used in *Single-Page Applications (SPAs)

2. How does Client-Side Rendering (CSR) work?

How does client-side rendering work
  1. first the client sends a GET request to the server
  2. then the server responds with a bare-bones HTML page
  3. the client renders it
  4. downloads, parses and executes the JavaScript bundle to boot up the app
  5. which will fetch any data needed
  6. to finally re-render the complete app

3. What are the Pros and Cons of Client-Side Rendering (CSR)?

Pros:

  • clear separation between client and server code
  • interactive app after first load:
    • navigation with less data and no refresh -> faster and more responsive app
    • data fetched on client uses bandwidth, but can be cached -> turn a site into a Single Page Application (SPA)

Cons:

  • slow loading times
    • slow first load, worse with bigger JS bundles, which are increasing
    • complete HTML cannot be cached
    • data fetching might delay interactions depending on size
  • SEO considerations
    • crawlers might not run JS, possibly harming SEO
  • code duplication
    • clear separation between client and server code can lead to duplication

4. When should you use Client-Side Rendering (CSR)?

  • when slow initial first load is not a problem
  • when you need a complex site with a lot of interactivity
  • when you need navigation without full page reloads
  • when SEO is not a top priority

Perfect for anything you would call an app, for example games, editors and other complex software


Resources

Full Video on YouTube

Client-side Rendering
Render your application’s UI on the client
Client-Side Rendering | JavaScript Patterns
Website created for the FrontendMasters course on JavaScript Patterns by Lydia Hallie
Rendering on the Web: Performance Implications of Application Architecture (Google I/O ’19)
One of the core values of the web is its accessibility: the same medium can be used to deliver content that adapts to different devices, capabilities and connection types. This variability needs to be factored into every architectural decision that is made. Luckily, frameworks are here to help.This…
Critical rendering path - Web performance | MDN
The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance. The critical rendering path includes the Document Object Model (DOM), CSS Object Model…
<script>: The Script element - HTML: HyperText Markup Language | MDN
The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL’s GLSL shader programming language and JSON.
Critical Rendering Path Visually
This topic is so important to understand because the web is all about the user experience, and loading fast your web page is one of the biggest keys to good user satisfaction. Learn about CRP in my detailed Medium Article: https://bit.ly/3yi8x7D Let’s keep in touch: Website: http://fatimaamz…
Render Performance Optimization With React - Adaptive Financial Consulting
60 frames per second (fps), this number not only represents the refresh rate of a typical pc monitor, but also…
Patterns for Building JavaScript Websites in 2022
Deciding on the approaches and tools to use to build on web these days can be a challenging prospect.…
Application Holotypes: A Guide to Architecture Decisions - JASON Format

https://frontend-digest.com/client-side-rendering-vs-server-side-rendering-vs-static-site-generation-2a0702cbb08d

Client-side vs. server-side rendering: why it’s not all black and white
Since the dawn of time, the conventional method for getting your HTML up onto a screen was by using server-side rendering. It was the only way. You loaded up your .html pages on your server, then your server went and turned them into useful documents on your users’ browsers. Server-side