Rendering on the web (Client Side, Server Side, Static & Pre-rendering)

Rendering on the web (Client Side, Server Side, Static & Pre-rendering)

Welcome back my readers! Today, I have chosen a very hot topic or I would say very important topic for web developers and even marketers. Why I address it as important? You got it? No. Not an issue! Let’s understand it first.

As we all know, without an audience, your product is nothing! That’s why, web developers, marketers give their day and night to make their website visible to search engines. Everybody wants their website to come on top in search results like me, wishing this article to come on top whenever anybody searches about the different rendering on the web. How to do it? I would say, for me, it’s a hard question. A lot of factors play a role in it. I would address three of them, which I think is relevant to the topic. Page Speed, Metadatas and content. These three factors can affect a lot your website ranking. How these factors get affected by the different approaches of rendering that we will understand in this article. But, till now, I think the answer which I wanted to give you about the topic's importance is done. I hope you got its importance. Right?

Now, you may be eager to know what are actually these rendering approaches. No worry! I will take you in depth, but before that, I want to address one of my article that focuses on what happens when you hit any url. Why I addressed it? Because I think the current topic is somehow has connection with it. After hitting the url, different steps take place and finally you got your responsible web pages, but, how these web pages are processed and gets visible on your screen is another interesting thing. In this article, this interesting thing is covered. The answer of how web pages are processed lies in the rendering approaches. Server-side, Client-side, Static and Pre-rendering are the different approaches in the current market. Without any wait, let’s understand each one of it, one by one.

Server Side Rendering -

As you know, it’s quite common in a webpage to have dynamic content. Dynamic content means a content that is not static say, different content for different users or content change using JS. For example, Facebook provides dynamic content, as every user gets different content based on their interactions. This is dynamic content. I think we have distracted from our main sub-topic. Let’s get into it again.

So, you have seen, in this process, Server handles everything. Dynamic content generation, HTML conversion and sending it to browser are handled by the server. That’s why, it is called Server-side rendering.

To better understand, here is a graphical representation:

Server Side Rendering (SSR)
Server Side Rendering (SSR)
Server Side Rendering (SSR)

I hope, above diagram will make you better understand.

Well, you understood what is Server Side rendering, but what are its pros and cons. Why you should go with it and why not.

Pros —

Better FCP and TTI :

How FCP improves? As the responsibility of generating the HTML relies on the server. A machine which has more computing power and high networking speed. More speed and power means faster generation of HTML content (faster dynamic content loading) which, in turn, faster response from the server for your request. This results better FCP.

How TTI improves? As dynamic content loading and all logic run on the server which makes possible to avoid sending a lot of JS files to client. This means the less JS file size (assuming the client side JS is limited) to download for a client which in turn makes better TTI.

Better SEO:

Cons —

Lower TTFB (Time to First Byte) :

More Server workload -

Same loading time on navigation -

This is all about SSR. Let’s move to CSR.

Client Side rendering -

Client Side Rendering (CSR)
Client Side Rendering (CSR)
Client Side Rendering (CSR)

In CSR, user gets single HTML file without any content, but with CSS and JS linked to it. User sees the blank page until the browser fetches the linked JS & CSS and prepare a full HTML content. I would recommend you to build your react or angular project (I know you must have built it). After build, you can see one html (index) and one JS file (bundle.js) is there. In the HTML file, no content is there, but on hitting any url, you will see the actual content after some time. How? This is Client side rendering. Browser prepares the content and you see it. Isn’t cool? You like this approach? Before taking any decision, let’s also understand its pros and cons.

Pros —

Fast TTFB -

Less Server load -

Better Caching -

Although, you can apply caching for SSR as well. The pages whose content has not changed a lot with time like search results page. You can cache them and when any update in db happens, just purge the cache and cache them again.

Better Navigation Experience -

Cons -

Bad FCP and TTI -

Note: There are ways to solve it like code splitting and make sure to lazy load — when there is a need, then serve what you need.

Poor SEO -

Although, in recent times, Google announced that Googlebot is now able to execute JS but other crawlers like yahoo’s, bing one don’t execute.

Note: It is said that Googlebot executes JS but, you can’t tell how successful it is. That’s why, don’t take risk and render your page in such a way that crawlers understand like HTML with full content.

This is all about CSR. Now, it’s time for static rendering.

Static rendering -

Static Rendering (Static SSR)
Static Rendering (Static SSR)
Static Rendering (Static SSR)

Seems Cool? Yes! No! Yes! No! Not able to take a decision. Let’s dive into its pros and cons.

Pros -

Fast TTFB -

Fast FCP and TTI -

Better Caching -

Better SEO -

Cons -

1. You can predict all possible requests, a user can make.

2. If HTML response is not different for different users like home page, service page etc.

3. If response does not change quickly.

Keep these questions in mind and get your answer whether to go with static rendering or not.

Lastly, get into pre-rendering.

Pre-rendering -

I have read somewhere, that Google pre-renders the first webpage of top search results (if browser supports it) as Google assumes top results is likely to be clicked and hence, providing a better user experience.

Well! Pre-rendering not only provides a better experience for us (humans) but also to bots. You might think why bots came into the picture. Let’s understand it.

As you know, when crawlers crawl your web page, they look into your content, metadatas and also navigation (links within the page). Bots make sure that the link should work properly and have decent initial load time. That’s why, pre-rendering is quite important, even more important if your website is SPA.

I will not get into its depth. Whatever I know, I have written it. I hope, now, you can answer what is pre-rendering and why it is important? For deep knowledge, you have to check other articles.

This is all about the topic. I have tried my best to explain each and every thing in very simple manner. If you liked it, then it would seem that hard work got justice.

You can also explore other articles of mine on medium or freeCodeCamp.

I have a keen interest in Web & App development. Currently, I am working as Software developer at Gradeup. Apart from development, I love to write articles.