How does Client Side Rendering Works ?

Dipak Mane

Dec 6, 2023

Image Credit : Unsplash

1. User Sends a Request

A user initiates a request to the server  by entering a URL or clicking a link .

Image Credit : Unsplash

2. Server Sends Minimal HTML

The server responds with a minimal HTML document , often containing the basic structure , links to stylesheets , and references to JavaScript files.

Image Credit : Unsplash

3. Browser Downloads HTML and Assets 

The browser receives the HTML and starts to render the page . Simultaneously , it begins to download associated stylesheets and JavaScript files .

Image Credit : Unsplash

4. JavaScript Execution

Once the required JavaScript is downloaded , it is executed in the client's browser.

Image Credit : Unsplash

5. Data Fetching on the Client 

The JavaScript code running in the browser may make additional requests to APIs or servers to fetch dynamic data .

Image Credit : Unsplash

6. DOM Manipulation

The JavaScript code running in the browser may make additional requests to APIs or servers to fetch dynamic data .

Image Credit : Unsplash

7. Rendering of Content 

The final content is rendered on the client side , including any dynamic changes made by JavaScript .

Image Credit : Unsplash

Next Story :  Must know difference between react and angular read carefully