Client-Side Rendering

Web page is generated in the user’s browser (the client) using JS.
Server sends a basic HTML shell + JS bundle.
Browser executes the JS, fetches data needed (from APIs), and dynamically renders content on the page.

CSR Workflow:

Browser requests a page like https://example.com.
Browser sends a GET request to the server.
The server sends back a minimal HTML page.

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="app.js"></script>
  </body>
</html>

// <div id="root"></div> is empty (content will appear here later)

// app.js is the JSfile that contains all logic to render the page.

Browser downloads app.js and executes JS:
1. Finds the #root element.
2. Calls a framework like React, Angular, or Vue to create HTML elements.
3. Populates the elements with data (fetched from an API if needed).
Browser fetching data
- Often the JS makes API calls to get dynamic content.
- Example: getting a list of blog posts from https://api.example.com/posts.
Rendering the page
- Data is fetched, the JS creates HTML elements dynamically and inserts them into #root.
User now sees a fully functional page.

Advantages of CSR

Fast interactions after initial load
- Only JavaScript runs to update the page. No full reloads needed.
Reduced server load
- Server doesn’t need to render HTML for every request.