"Client-Side Rendering", "Server-Side Rendering", "Single Page Application". What are these fancy terms? Sounds alien does it not? Well, not for long.
We will be discussing:

To answer this, we must understand what rendering means. By definition, rendering is the process of generating images on a screen from data or instructions given in non-visual formats. However, in this context, rendering has a somewhat different meaning.

Let us go back to the early internet days when webpages are mere textual documents with no styling images or interactivity to offer. Each page resided in a file that is sent to the browser when the user requests for it. Those were simpler times. But then the internet evolved, and with it, we saw the evolution of webpages. Webpages started to have images and styles that made them attractive.

This was necessary as the internet was no longer a secret military project used for communication but a place for people to connect and share information. This led to the creation of thousands of new sites, hungry for attention, and mere texts didn't provide much creative freedom to these newly born artists (web-designers).

Even at this point, web pages were dumb. There was no interactivity. You cannot expect a webpage to remember a number or add something to it. This was a major setback. Even though you get all the beauty and creativity in your site, there was no point if it doesn't have the brain to process 1 + 1. You can imagine a stylish calculator website that doesn't work or a shopping site that loads every time you increase the items in the cart.

To overcome these limitations we got, java applets. Java code running on web browsers. But this made the browsers bulky both in installation size as well as the RAM consumption.

Javascript:

In 1995, Netscape, a browser now lost in history, developed a scripting language that can replace java applets. This language was far more light-weight than java applets and was initially known as LiveScript. But as java was gaining popularity at that time, LiveScript got renamed as javascript.

Javascript was able to provide interactivity to websites by manipulating DOM elements.

Later libraries like jquery made manipulation of dom elements far easier by providing a set of functions for useful dom manipulations like slide, add, remove, etc. This was the beginning of client-side rendering.

Up until now, webpages are injected with relevant information and are then sent to the browser. This method of rendering web pages is known as server-side rendering. If you are accessing a particular blog on a site say Finocontrol, a new request is made to the server which then fetches all the relevant data from the database and finally returns an HTML page with the required information. However, if you are visiting ten articles each time along with the post information such as author, title, image and the body, the HTML body will also be sent. This is a wastage of bandwidth since you a repeatedly downloading similar data over and over. The resulting site is slower and adversely affects the user experience.

But with the advent of javascript, things changed. HTML can now be manipulated, on the browser itself. As a result, SPA (Single Page Application) Frameworks and Libraries such as Angular and React were introduced. The idea was to serve a single HTML page that initially has a blank body and use Javascript to populate content within. In this new arrangement, the server is only responsible for providing content in JSON or some other format whereas, the responsibility of populating the HTML body with the given content lies with the browser. The browser populates the HTML by executing the js file downloaded on the initial load. Since little and only relevant data is fetched from the server, the site is faster than server-side rendered site. Also, as the responsibility of processing for populating the HTML is shifted to the client. The server can serve more requests with the same resources.

Client-Side Rendering:

Advantages:

Disadvantages:

Examples: React, Angular, Vue

Server-Side Rendering:

Advantages:

Disadvantages:

Examples: Laravel, Code Igniter, ASP.NET

Conclusion

Both Client-Side and Server-Side rendering have their advantages and disadvantages. If SEO is of utmost concern for you or if the fast initial response is your priority, it is advised to accommodate server-side rendering. Similarly, if seamless transitions and interactions are your priority or if you want to serve a large number of requests with a tight budget on server costs, you may opt for client-side rendering.

But wait! Before you make your mind, you must check out dynamic rendering and hybrid rendering. You can have the best of both worlds, using dynamic rendering or hybrid rendering. We will discuss those in our next post.

Stay tuned to Finocontrol for more exciting contents.

credits

knowledgebooster