We are all familiar with the rendering types; Client-side vs server-side. Especially modern front-end developers are familiar with these more than anyone. However, I've noticed that it’s a very confusing topic for beginners.

There are 2 common ways to render a website. But not all of them are suitable for all situations. So let’s take a look.

Server-side rendering

Since the birth of the internet, websites have been using server-side rendering. It is one of the most common methods to display a website to the audience. In this method, when someone sends a request to the server that contains the content of that website, he/she delivers the content by converting the HTML file into browser readable information.

A server-side website renders the following steps below. Since it takes only milliseconds to send you back the requested file, it often overlooks the steps that’s happening behind the scene. So let’s simplify things:

1.Our user sends a request to the server.

2.Server prepares the browser readable HTML file.

3.Then it serves or renders the HTML file to our web browser.

4.But wait! It’s not interactive! So the browser downloads a JavaScript file.

5.Then it executes JavaScript with the HTML file.

6.Voila! You have an interactive website on your browser.

Simple, right? Hold that thought. Like everything on this planet, server-side rendering also has a good and a bad side. So let’s see the Pros and Cons of this method.

Pros:

a.This method is really really good for SEO (search engine optimisation)

b.Initial content delivery is faster than client side rendering.

Cons:

a.Every time you request something, it reloads everything

b.There are lots of server requests

c.Not good for large applications with hundreds and thousands of requests

Use case:

Though most of the old websites use this method. Nowadays modern websites are using a combination of the different methods to make websites much more suitable to their users' needs.

Client-side rendering

Client-side rendering usually means rendering the web content in the browser with the help of almighty Javascript. So the concept is fairly straightforward, instead of getting data from HTML itself, in this method a barebone HTML document will be provided with a Javascript file. And the rest of the site will render the data from Javascript dynamically.

This modern method of approach is relatively new. It didn’t become that much popular until the rise of popular libraries like react.js, vue.js etc. So let’s see how it works:

1.Our user sends a request to the server.

2.The server returns an HTML file with javascript links.

3.The browser downloads the html files.

4.Then it downloads the Javascript and CSS files.

5.The browser executes library or framework (reactJS, vueJS etc)

And then it loads the website

Like server side rendering, client side rendering also has pros and cons. Let’s take a look at them:

Pros:

a.Fast rendering time for all kind of websites

b.Large applications with tons of logic and authorization benefit from it mostly

c.Tons of support from large organisations and communities

d.A lot of modern frameworks use this method

Cons:

a.Low SEO ranking

b.If user has poor network, initial loading might take more time than a server side rendering

So when we need both good SEO, good load time, and our application is huge, what's the best approach you might ask! Right? In that case we have something called Pre-rendering.

Pre-rendering

Prerendering is another modern method that is used to preload all the elements on our webpage in preparation for a web crawler to read it. So it works like a military radar system. The prerender service will wait for a request. When it receives one, it will check if the user is a human or a robot-like web crawler. If it is a robot, the prerender agent is going to serve a cached page with everything in it readymade that includes data, images, videos, files etc. If the user is not a bot, then it will act like a client side rendering web application which solves our problem with the client-side rendering.

How does it work step by step?

The user sends a request to the prerendering tool on server The prerendering tool will check if the user is a BOT or NOT! If it is a BOT, the server will send a static website with HTML, CSS, Javascript, images, videos, files and everything it has If it’s not a BOT, then it will act more like a client side rendering application with all the flexibility and functionality A fully interactive website is served to the user.

As we know, all things have some pros and cons. So, let’s see what we have for pre-rendering:

Pro:

a.Way better SEO ranking

b.Comparatively fewer requests are sent

c.Smooth and buttery experience for our user

Cons:

a.If a user has a slow internet connection, that’s going to be a problem!

b.Must have good UI design for web application

That’s it for today. I hope you’ve learned something from my post. If you have any questions feel free to reach out to us. At Archi’s Academy, we are always ready to help you.