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