SSR - Server-Side Rendering

Disclaimer: The purpose of the article is to explain what server-side rendering is and why it is important. If you want to know how to do it, and which tools you can use for that, I encourage you to search for it, after you've finished reading this article. I am currently using Next.js.

---

Researches on the website's loading times and the effect they have shown that:

• 40% of people abandon a website that takes more than 3 seconds to load. 
• A 1-second delay in page response can result in a 7% reduction in conversions.
• 47% of consumers expect a web page to load in 2 seconds or less.
• 73% of mobile internet users say that they’ve encountered a website that was too slow to load.

for more information, you can check these links:

So how does a website is rendered in the browser?

The first thing that a browser receives is an HTML document. This document contains references to other assets, like images, CSS and JavaScript. The browser knows to go fetch and download these assets when it parses the document. So even though your browser has your HTML, it can't render the website until its corresponding CSS has finished parsing.

But once that is done, your browser goes ahead and renders the page. that means that just with HTML and CSS the browser can render the page. The browser is really good at this and does it very fast.

The last part of this process is JavaScript. After the HTML document has been parsed, the browser will go and download your JavaScript files. The download time of a JavaScript file can be significant if the file is large and the network is poor. The browser needs to parse it, and on devices with low-powered hardware, this can take quite a bit of effort and time.

You can see some really slow load-times if your first render is dependent on JavaScript.

If you want a fast, first render of your website, you will need your site to have a meaningful HTML and CSS for the user. JavaScript should be considered as an enhancement of that HTML and CSS since its loading can be deferred.

However, it's not always that simple. Some types of websites need complex features that rely heavily on JavaScript. These kinds of websites use JavaScript framework like React, Angular and Vue. There is an inherent problem using these frameworks. They tie up your rendering code in JavaScript. On poor networks, this can be a disaster for your first render. But it's not all doom and gloom.

Here comes SSR

Server-side rendering lets you generate the HTML on the server and send it down to the browser.

This means that the user will see the HTML version of your app almost imminently as the JavaScript app boots up in the background. So while this won't make your page load faster than a none SSR version, it does give the user something to see as the JavaScript downloads in the background.

This is crucial for "The Critical Rendering Path". the critical rendering path is a reference to the process of delivering the most important pieces of content to the browser, so it can render your page. If we can deliver the most important assets quickly, then the browser can do its job and render the page quickly to the user.

We all want fast loading websites, and server-side rendering is a tool to help you get your website rendered faster. But do consider the TTI factor. TTI stands for "time to interactive". It is a reference to the time in which the site is visible to the user but is not interactive.