Explaining SSR & CSR in Javascript
Tags: javascript, performance
Published: 2021-10-01 10:35:04



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.

![Rendering path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fk2op8egax673fej8j2o.png)

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:

* [Mozilla MDN Critical rendering path](https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path)
* [Ryan Seddon: So how does the browser actually render a website](https://www.youtube.com/watch?v=SmE4OwHztCc)
* [Rendering on the Web](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)

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

1. User requests access to our webpage
2. Server sends a response to our browser
3. Browser downloads the javascript file
4. Executes the files content
5. 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

1. User requests access to our webpage
2. Server sends ready to go HTML files
3. Browser renders the page but its not interactive
4. Browser downloads the Javascript
5. Execute the Javascript
6. 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](https://web.dev/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





![Goodbye](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7resgn2rejbbi8ypiky.gif)