Client Side Rendering (CSR) vs Server Side Rendering (SSR). Which one is the best?

image capture from https://pt.slideshare.net/AlexandrLazarev1/server-side-rendering-vs-client-side-rendering

Hello guys, how are you? Hope you’re doing well.

In this article I’m going to discuss about CRS and SRR with pros and cons of which one. Let’s start.

First of all, what’s Client Side Rendering and Server Side Rendering?

If you are going to work with web development, in some point of your career you’re going to hear about these terms.

Let’s start defining what is Server Side Rendering (SSR).

An illustration of how SSR works.

Sites that uses a SSR approach works like the image above. The client (browser) will make a request to the server whom are going to grab the files and send it back to the client in order to display the page.

SSR is a type of architecture where the browser receives the HTML file ready to be loaded on screen. So, instead of the browser loading all the components, the server will do the heavy job and it’ll send the files to the browser ready to be displayed.

• On the server you’ll need to render your app and send it as text to the browser. Using React, you’ll need to use a function like this to convert the app to text:

ReactDomServer.renderToString(myApp);

• On the browser you’ll need to parse the text through a js function in order to be able to display the app to users. Using React, you’ll need to use a function like this to load the app:

ReactDom.hydrate();

On the other hand lies the CSR approach. with this type of architecture the browser receives a pretty simple HTML file with a <div> tag which will be populated dynamically. Bellow is an example of this approach using react.

a simple HTML blueprint

We have a simple HTML file with a <div> tag which has an id property of name root. With this id, modern front-end frameworks like react will use it to bind the app and load all the components dynamically in the browser (on the client side). With this approach, all the heavy work happens on the client side.

a simple react app blueprint.

Ok. Now that we have an idea of how each implementation works, which one is the best?

The answers: It depends hahah. There is no easy answer for this question since each implementation have its pros and cons and these are the aspects that I’m going to discuss bellow.

Server Side Rendering — Pros and Cons

Pros

• Good for SEO (Search Engine Optimization) — Since the server responds with a fully rendered page it will be easier to SEO engines locate this page. So if you intend to use SEO with your website, this is a very important aspect to analyze before implementing it.
• Good for static web sites — It’s good for static web pages like documentation sites e.g. -> react documentation web page is built using this approach.
• Initial page load — To the user it will look like this type of web page loads faster since the server did all the hard work to render the page and it responded to the browser with a fully rendered HTML page to be displayed.

Cons

• Full page reload — It needs to do a full reload of the page every time that new content is requested from the server.
• Slower page rendering — It takes more time to the server to respond the request since it needs to process the page first.
• # requests to server — More requests will be made to the server because every time that we need a new page a request will need to be made to the server to get that file.

Client Side Rendering — Pros and Cons

Pros

• Richer interactions — This approach makes the website feels like an app since it doesn’t need to do a full render of the page on each interaction. It’ll only render new content or changes to the page. After the page is fully loaded, if you need to click on a link on it, the browser doesn’t need to send another request, it will render new content through logic.
• Faster response — The server responds a lot faster since it doesn’t have to process anything. It only sends the basic HTML file.
• Good for web applications — Its great for web applications because it offers a faster user experience after the page is loaded. All the logic of the page is loaded at the beginning (views, components, etc). So you can have really fast interactions.

Cons

• low SEO potential — SEO will have difficulty with this approach since it loads its content dynamically. In order for SEO to work, it needs to load the site and figure out what it is about.
• Longer initial loading — Although you’ll have a faster interaction it will load slower than a SSR page.

Alright!! Now we can analyze pros and cons of each implementation and based on this decide which one to use.

I hope this helps you on your decision. Nice coding!!