Client-Side Rendering (CSR)

Client-Side Rendering (CSR) is the pattern where the server returns a minimal HTML shell and bundle of JavaScript, and the browser fetches data and builds the entire UI client-side. Single-page applications (SPAs) built with React, Vue, or Angular without an SSR framework default to CSR.

Strengths

• Rich interactivity. The whole app runs in the browser; transitions and state changes are instant after the initial load.
• Simpler deployment. Static files on a CDN; no Node or backend rendering needed.
• Clear separation. Front-end and back-end are independent; the API does data, the SPA does UI.

Weaknesses

• Slow first paint. Users wait for JavaScript to download and execute before seeing content.
• SEO friction. Crawlers run JavaScript, but slowly and inconsistently; metadata and OG tags are often blank in initial HTML.
• Heavy client work. Mobile and low-end devices pay the cost.

When CSR is the right choice

• Internal tools and dashboards behind authentication where SEO does not matter
• Heavily interactive applications (editors, design tools, IDEs)
• Cases where the user is logged in and personalisation requires client-side state anyway