Explaining SSR & CSR in Javascript

#javascript #performance

Recently at my job we decided to ditch React.js and go with Javascript vanilla for better perfomance since our website is a newspaper we found it to be difficult justify having React.js for something so uneventful, in the process we talked a lot about CSR, SSR and even a Hybrid approach, I found it hard to understand how these rendering techniques work, after investigating it myself, I decided to create this post with my findings.

Before going too deep let's first see all the diferent kind of rendering we can expect in Javascript:

Client side rendering also known as CSR
Server side rendering usually referenced as SSR
Hybrid rendering a combination of both CSR and SSR

The critical path

Let's begin by understanding how the browser paints information on our screen when we visit a website.

There is a sequence of events that every browser must go through before rendering the initial view of a web page, we won't go into much detail but if you want more information about this topic check these links:

First, we start with an HTML request, after the server returns the HTML, the browser begins parsing the HTML converting the received bytes to the DOM tree, then initiates requests every time it finds links to external resources (stylesheets, scripts, or embedded image references) until it gets to the end of the file that's when
it builds the CSS object model.

With the DOM and CSSOM complete, the browser builds the render tree, computing the styles for all the visible content. After the render tree is complete, layout occurs, defining the location and size of all the render tree elements. Once complete, the page is rendered on the screen.

What is Client-side rendering ?

Instead of receiving all the data from the HTML document we use a barebones version with basic information and a link to a Javascript file wich then renders the rest of our web page using the browser.

This is the default for many frameworks in javascript such as React.js, Angular.js, Vue.js...etc

How it works

User requests access to our webpage
Server sends a response to our browser
Browser downloads the javascript file
Executes the files content
Content is visible and you can navigate and interact with the web page

What is Server-side rendering ?

Rather than having a small HTML document wich then calls the assets needed, we move the process of rendering our initial page to the server, there we process the javascript of the website and render it to a static HTML so the clients browser doens't have to.

How it works

User requests access to our webpage
Server sends ready to go HTML files
Browser renders the page but its not interactive
Browser downloads the Javascript
Execute the Javascript
Content is interactive

Difference in rendering between CSR vs SSR

As you can see the main difference in terms of steps is that with SSR the content is visible sooner but it isn't interactive, meanwhile with CSR the page takes longer to load but its interactive and visible at the same time.

Advantages of SSR

SEO

The complete page's HTML is rendered, this assures the page metadata and content is always visible and accurate for the web crawlers to scan.

Faster load

Pages have a much faster load time and a quicker first contentful paint because the content is available in the browser sooner.

Social media

When someone shares your page on Facebook or Twitter, it includes a preview of the page because we have all the metadata and content pre rendered on our server already.

Discoverability

not long ago google announced that it would give preferential search rankings to the sites with the fastest page load speed (See Core Web Vitals). Meaning that sites with a better user experience will have better search rankings.

Final words

I hope this article helped you to understand these concepts a little bit better, if you want to dig deeper remember to check the links I left for you, see you on the next article and have a nice day :D