Tejaswa Hinduja

This blog is for anyone who wants to understand how browsers render websites and the different rendering techniques developers use to improve performance and the user experience.

By the end of this blog, you’ll understand what Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR) mean, how they work, and when each approach is useful.

How Does a Browser Render a Website?

So first and fore most lets go through the basic flow of how websites are rendered on the browsers screen.
Whenever a connection is established between the browser and a machine, the machine sends back a html file to the browser which looks like this

Hi there

//This would have the link to the js bundle

Once this html file is received by the browser it starts HTML parsing and building the DOM tree, whenever it reaches the css link it fetches the css from the server and starts building CSSOM parallely with DOM tree.
When the html parser reaches the script tag it **pauses **the HTML parsing, and the js bundle is fetched from the server and starts executing the javascript , once the execution is finished the browser then resumes building the DOM tree, and Once the browser has enough info the render tree is built using the DOM and CSSOM . The browser then calculates the layout and paints the screen.

So now lets get to CSR , usually in CSR the html file is mostly empty and it looks like this

The js script handles the DOM tree and clients see a white screen.Only after the JS runs does the browser finally get enough information to build a meaningful render tree.
Lets talk about SSR now,
The server runs the javascript before sending anything to the user , the browser then receives a full formed html file. Thus the user does not have to see a white screen and can see the page almost instantly.
Though there is a brief window wherein the user can see the page but cannot click on buttons as the browser is still running the js from the script tag , after the js runs it does not create a new DOM from scratch, instead it looks into the already built DOM and add interactivity to it.

SSG is similar to SSR but instead of running js on every request , the server has already built the page and saved it as a static file.
ISR takes SSG a step forward even though the page is pre built the server still occasionally updates that static file in the background whenever data changes without re building the whole page.

Connect with me on socials:-
X/Twitter :- https://x.com/Tej_Codes
linkedin:- https://www.linkedin.com/in/tejaswahinduja/
github:- https://github.com/TejaswaHinduja