ContextQMD
Back to Content

Client-side rendering (CSR)

files/en-us/glossary/csr/index.md

latest2.3 KB
Original Source

Client-side rendering (CSR) refers to the practice of generating HTML content using JavaScript in the browser. CSR is opposed to {{glossary("SSR", "server-side rendering")}}, where the server generates the HTML content. Both techniques are not mutually exclusive and can be used together in the same application.

A pure CSR app may return the following HTML content:

html
<!doctype html>
<html lang="en-US">
  <head>
    <title>My App</title>
    <script src="bundle.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <noscript>
      <p>This app requires JavaScript to run.</p>
    </noscript>
  </body>
</html>

Then, the actual page content is generated by JavaScript in bundle.js, using DOM manipulation.

Benefits of CSR include:

  • Interactivity: any page update, including route transitions, do not require a full page reload. This makes the app feel faster and more responsive.
  • Performance: the server only needs to send the initial HTML content and JavaScript assets. Subsequent page updates can be fetched from an API, which can be faster than fetching a full HTML page, and causes less load on the server.

Both SSR and CSR have their performance tradeoffs, and a mix of SSR and CSR can be used to combine the benefits of both techniques. For example, the server can generate a page skeleton with empty placeholders, and the client can fetch additional data and update the page as needed.

Note that {{glossary("SPA", "single-page applications")}} do not require the site to be CSR. Modern frameworks, such as React, Vue, and Svelte, can be used to build SPAs with SSR capabilities.

See also