CSR: Client-Side Rendering

Client-Side Rendering (CSR) sends a basic document to the browser and uses JavaScript to fetch data and build the page there.

How CSR works

1. The server sends a basic HTML shell and scripts.
2. The browser downloads and runs JavaScript.
3. The script requests data from an API.
4. The browser updates the page without a full reload.

const response = await fetch('/api/tasks');
const tasks = await response.json();
document.querySelector('#tasks').textContent = tasks.length + ' tasks';

Strengths and trade-offs

• After startup, interactions and partial updates can feel fast.
• It suits dashboards, chat, and other highly interactive applications.
• The first useful content may arrive later while scripts and data load.
• Provide meaningful HTML, loading states, and a fallback when JavaScript or the API is unavailable.