Client-side Rendering [CSR]

Client-side rendering (CSR) is a method of building and displaying web pages where the content is generated in the user’s browser using JavaScript, rather than being delivered as fully formed HTML from the server. When a user visits a page that uses client-side rendering, their browser first receives a largely empty HTML file, then downloads and executes JavaScript to build and display the page content.

This approach is commonly associated with JavaScript frameworks such as React, Angular, and Vue.js, and is frequently used in single-page applications (SPAs).

How it differs from other rendering methods:

• Server-side rendering (SSR) — the page is fully built on the server and delivered as complete HTML, meaning content is visible almost immediately.
• Static site generation (SSG) — pages are pre-built at deploy time and served as ready-made HTML files.
• Client-side rendering (CSR) — the browser does the heavy lifting, assembling the page after the JavaScript has loaded and executed.

Client-side rendering has historically presented challenges for SEO. Because the content is not present in the initial HTML response, search engine crawlers need to be able to execute JavaScript in order to see and index the page.

While Google has improved its ability to render JavaScript over the years, it is not instantaneous. We know that pages may be crawled in two waves, with JavaScript rendering happening later. This can delay indexing and, in some cases, result in content being missed altogether. For SEO-critical pages, server-side rendering or static site generation is generally the safer choice, as content is immediately available to crawlers without relying on JavaScript execution.