Client-Side Rendering (CSR) VS Server-Side Rendering (SSR)

What sets them apart in the world of development really?

Photo by XPS on Unsplash

Remember the simple era when most web pages only displayed static content? When the web page is just a normal web page, with little or no interactive mode? At the time, the only motivation for hosting these sites was to provide information about the company and its products and generate sales leads. Therefore, server-side rendering is the only way to display HTML on the screen. This is the only way to upload HTML to the server and then the server converts them into useful documents for the user.

Fast forward to today. The scene has undergone earth-shaking changes. Today, most websites are not just static pages that display content. In fact, they are applications that pretend to be websites. You can send messages, update information online, shop, etc.

This is why server-side rendering is slowly starting to fade into the background and gives way to the increasing method of rendering client-side web pages. But how do you decide which method is best for you? As with most things in software development, it all depends on what you plan to do with the website. It is recommended to weigh the pros and cons before deciding which is the best way to go.

Let us help you make the right choice. Starting from the basics down below:

What is Server-Side Rendering:

In server-side rendering when a user makes a request to a webpage, the server prepares an HTML page by fetching user-specific data and sends it to the user’s machine over the internet. The browser then construes the content and displays the page. This entire process of fetching data from the database, creating an HTML page, and sending it to the client happens in mere milliseconds.

Now Imagine that a user clicks a link on the page, the browser sends a request to the server and the entire process is carried out by the server again. This process not only increases the load on the server but also consumes unnecessary internet bandwidth.

What is Client-Side Rendering:

Client-side rendering is a reasonably new approach to rendering websites, and it didn’t really become popular until JavaScript libraries started incorporating it.

When we talk about client-side rendering, it’s about rendering content in the browser using JavaScript. So instead of getting all the content from the HTML document itself, a bare-bones HTML document with a JavaScript file in initial loading itself is received, which renders the rest of the site using the browser.

With client-side rendering, the initial page load is naturally a bit slow. However, after that, every subsequent page load is very fast. In this approach, communication with the server happens only for getting the run-time data. Moreover, there is no need to reload the entire UI after every call to the server. The client-side framework manages to update UI with changed data by re-rendering only that particular DOM element.

Today, Angular and React.js are some of the best examples of libraries used in client-side rendering.

To help you understand the pros and cons of each approach, listed below are a few pointers that will guide you towards the right decision.

Server-side pros:

1. Search engines can crawl the site for better SEO.
2. The initial page load is faster.
3. Great for static sites.

Server-side cons

1. Frequent server requests.
2. An overall slow page rendering.
3. Full page reloads.
4. Non-rich site interactions.

Client-side pros:

1. Rich site interactions
2. Fast website rendering after the initial load.
3. Great for web applications.
4. Robust selection of JavaScript libraries.

Client-side cons:

1. Low SEO if not implemented correctly.
2. The initial load might require more time.
3. In most cases, requires an external library.

Now that you’re aware of the pros and cons of each approach, let’s take a look at ideal scenarios for their implementation.

Client-side vs. server-side rendering: why it's not all black and white

Client-Side vs. Server-Side Rendering: Which Is Better for SEO?

When to use server-side rendering

• An application has a very simple UI with fewer pages/features
• An application has less dynamic data
• Read preference of the site is more than write
• The focus is not on rich site and has few users

When to use client-side rendering

• An application has a very complex UI with many pages/features
• An application has large and dynamic data
• Write preference of the site is more than reading
• The focus is on rich site and a huge number of users

In a nutshell, server-side rendering is like receiving a pre-assembled toy train set whereas client-side rendering is like receiving a dismantled one that you need to assemble yourself. You have to decide whether you’d like to play with a pre-assembled one or prefer assembling it just the way you want it.

Hope this blog helps you make the right decision. Do let me know your thoughts in the comments.