What is Client-Side Rendering?

This explanation is written by ChatGPT and not authored (yet).

Client-side Rendering (CSR) is a web development technique where web content is generated primarily in the user's browser.

How does Client-side Rendering work?

When a user visits a CSR-based website, their browser downloads a minimal HTML page and JavaScript files. The JavaScript runs in the browser to dynamically generate the website's content.

Just like an SPA, follow-up pagehits are then done via JavaScript as well. Such navigation is then called a soft navigation.

Advantages of Client-side Rendering

  • Interactive and responsive web pages.
  • Content can be updated instantly without a full page reload.

Potential drawbacks of Client-side Rendering

  • Slower initial page load times.
  • May not be as search engine friendly, as content is generated after the page loads.

Core Web Vitals and Client-Side Rendering

Due to its soft-navigation character, a site that uses Client-side Rendering for succesive page navigations has the same nuances as a Single Page Application when it comes to Core Web Vitals data.