web dev//rendering//CSR

CSR (client-side rendering) is a rendering strategy for web pages in which the browser's JavaScript generates most of the content: the server sends the pieces and the instructions, and the browser builds the page. The page is completed in the browser, in four steps:

CSR (client-side rendering) is a rendering strategy for web pages in which the browser's JavaScript generates most of the content: the server sends the pieces and the instructions, and the browser builds the page. The page is completed in the browser, in four steps:

1Nearly empty HTML arrives2JavaScript loads3Data is fetched4The DOM is complete

What arrives over the wire is a shell, often a single empty container and a script tag; the page the user sees exists only in the DOM after scripts run. That is why simple crawlers, which read the fetched HTML and never execute JavaScript, see nothing (Crawler).

The fixes are on either side: the site can render on the server (SSR) or pre-render at build time, or the crawler can render (rendering crawler). This site is CSR with an edge function that injects content for bots, one of the hybrid answers.

CSR is not the same as a SPA: the first says where the HTML is built, the second says whether navigation reloads the document.