Understanding SSR, CSR, and SSI: The Key Differences in Web Rendering and How They Impact Performance

You may ask, what is web rendering? Web rendering is simply moving stuffs from point A to B. Technically. It is a process that converts codes to a visually appealing and an interactive website. There are different approaches to web rendering, and they impact how quickly contents appear and how the website performs.

Server-Side Rendering: When you visit a website that uses SSR, the HTML is generated and rendered first on the server before it gets to the browser, hence the user gets to see the contents of the webpage almost immediately. However, while the initial load is faster, the interactive components of the webpage experience delay as JavaScript has to load and execute afterwards (Hydration). This is often used for news articles or online stores where fresh contents are required on every request.

Client-Side Rendering (CSR): With CSR, the server serves a basic(un-rendered) HTML and JavaScript to the browser, the browser in turn goes on to generate the website. This process delays the initial loading of the webpage content, however it is usually very interactive, as there is no reload of the HTML elements. This is often used for social media and games.

Static Site Generation (SSG): Here, the webpage is pre rendered and saved. This results in an instant load time as there are little or no dynamic components. SSG is perfect for websites that don’t change every often. This page is example of an SSG rendered webpage.

All of these beg the question?

Which is the best approach?

It depends on your application's needs. For content-heavy websites (blogs, e-commerce), SSR or static rendering is typically better. For highly interactive apps (social media, dashboards), CSR may perform better after the initial load.