11 KiB
| title | chunk | source | category | tags | date_saved | instance |
|---|---|---|---|---|---|---|
| Client-side rendering (CSR) - Glossary | MDN | 1/3 | https://developer.mozilla.org/en-US/docs/Glossary/CSR | reference | web, html, css, javascript, documentation | 2026-05-05T05:26:21.676475+00:00 | kb-cron |
MDN HTML HTML: Markup language
HTML reference
HTML guides
Markup languages
CSS reference
CSS guides
Layout cookbook
JavaScriptJS JavaScript: Scripting language
JS reference
JS guides
Web APIs Web APIs: Programming interfaces
Web API reference
Web API guides
- Using the Web animation API
- Using the Fetch API
- Working with the History API
- Using the Web speech API
- Using web workers
Technologies
Topics
Learn Learn web development
Frontend developer course
- Getting started modules
- Core modules
- MDN Curriculum
- Check out the video course from Scrimba, our partner
Learn HTML
Learn CSS
Learn JavaScript
Tools Discover our tools
About Get to know MDN better
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:
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.