The key idea behind Server-side rendering is the process of taking a client-side JavaScript framework website and rendering it to static HTML and CSS on the server.

Why is this important?

The answer for a fast-loading website is server-side rendering. So let’s take a moment to talk about the critical path in your website’s first render. The critical 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.

Understand What’s Behind

How fast the browser renders your app depends on how you build it. The first thing the browser receives is an HTML document. This document contains references to other assets — such as images, CSS, and JavaScript. The browser knows to go fetch and download these assets when it parses this HTML document. So, even though the browser has your HTML, it can’t actually render the website until its corresponding CSS has finished parsing.

Once that’s done, the browser goes ahead and renders the page. That means that with just HTML and CSS, the browser can render the page. As we know the browser is good at this, so it does it very fast.

Now, the final part of this process is JavaScript. After the HTML document is parsed, the browser will download your JavaScript files. The download time of a JavaScript file can be significant if the file is large and the network is poor — and the browser needs to parse the JavaScript. On devices with low-powered hardware, this can take quite a bit of effort and time. Also, you could see slow load times if your first render is dependent on JavaScript. JavaScript should be considered an enhancement of HTML and CSS since its loading can be deferred. However, it’s not always that simple. Some websites need complex features that rely heavily on JavaScript — these kinds of websites use JavaScript frameworks.

Here Comes the Server-side Rendering

JavaScript frameworks can be fast if you’re willing to put in the work. We can put this work in with server-side rendering — where we generate the HTML on the server and send that down to the browser.

So, the user sees the HTML version of your app almost immediately, while the JavaScript app boots up in the background. This may not make your page load faster than a non-server-side rendered version, but it does give the user something to see as the JavaScript downloads in the background — a nice benefit.

Surveys and Stats

Before discussing further, let’s see some stats from different online sources.

#javascript #gatsby #next #nuxt #web-development