RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Glossary/CSR below:

Client-side rendering (CSR) - Glossary

Client-side rendering (CSR)

Client-side rendering (CSR) refers to the practice of generating HTML content using JavaScript in the browser. CSR is opposed to 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:

<!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 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.