Staring at a blank screen till the website is built up by the browser gives a bad user experience. A loading screen with progress meter makes the difference. You also don’t want to wait longer for the website to be available for interactions. Hence, the web developers take a call on how to render a website to give a smooth and uniform experience to the user.
A web developer makes the choice of how to render a page, depending on factors like, how complex the UI of a website, how much information has to be presented on the website, is the page more dynamic or closer to a static page and others.
To look into what happens when you visit a website, you enter the URL of a website you want to visit, your computer (Client Computer) sends an HTTP request to a backend computer called a server, asking to provide the required data to view that website.
Depending on what the server sends (an already rendered HTML file or data like for the client to render the webpage on its own), the rendering can be classified as either client side rendering or server side rendering.
There are other ways of rendering a website, but these two are the most popular, and all others have just leveraged these two for optimal use case. Most times, you would take the best of both for a user experience you would want to achieve.
Let's try to understand what server side rendering and client side rendering really are, and the pros and cons of using each.
Client Side Rendering
From the beginning of web development, Server Side Rendering was the go-to rendering process, owing to the web technologies and their capabilities at the time, but with the rise of single page application framework, client side rendering gained popularity.
Unlike the server side rendering, the user would not be able to view the page until the above process of rendering is completed. While in the server side rendering process, the user would have a pre-rendered HTML page to view, whilst the browser is loading up the scripts for interactions.
So on the client side rendering process, you won’t have the viewable page until the scripts are executed. The final rendered page is both viewable and intractable. The below image from Walmart’s Tech Blog shows us how the client side rendering process works.
Server Side Rendering
The below diagram from the Walmart Tech Blog gives a pictorial representation of the same.
So the server side render will give you a viewable page faster, but it won’t be intractable right away, whereas the client side render will take time on the initial load but give you a completed intractable page.
Differences and good parts:
As you may notice, the client saves time by not waiting for a server response, thus giving a good user experience in the second and subsequent renders. This is done by the framework, on the client. The server sends most of the data on initial request, such that the framework can do the routing by dynamically building pages.
By this, the subsequent rendering of pages is faster as it is done locally.
Whereas in the server side rendering, for every route to a new page, a fresh request is made to the server. Then, you will have a ready to view HTML document and browser has to download, load JS all again.
That implies, the server side rendering is slower on the subsequent renders.
Good parts of Client Side Rendering:
- Fast rendering once the website loads up.
- Can handle big amount of logic and data authorization.
Not so good parts:
- poor for Search Engine Optimization
- initial loading takes time compared to server side rendered page.
To conclude, use client side rendering, If your application has more dynamic data, complex UI, bigger number of users and does not emphasize on SEO content.
Good parts of Server Side Rendering:
- Initial load up is faster than the client side rendering.
- Good for Search Engine Optimization
Not so good parts:
- Makes a lot of server requests.
- Full page loading takes time and reloads.
- Bad choice for application with a lot of interactivity
So, when to use Server side rendering. Use SSR, if your application is with complex UI with fewer interactions, or close to a static page and a less number of people use it.
Hope this introductory article on client side rendering and server side rendering, gave you a basic understanding. But a point to be made, developers use an amalgamation of both of this to achieve the behavior they desire. This gave raise to other rendering processes like pre-rendering, static side generation, isomorphic. We will get into this later when we deep dive into the details of rendering in future articles.
Resources and References:
Medium blog by Walmart Global Tech - Server Side Rendering over Client Side Rendering
Stack Overflow answer to Client Side vs Server Side Rendering - Client Side Rendering vs Server Side Rendering
If you want to stay up-to-date with the latest insights in Artificial Intelligence, DevOps, Cloud, Linux, Programming, Blockchain, Productivity, and more, subscribe to my Weekly Newsletter. You’ll also get access to my tutorials, tips, and guides, as well as resources from other experts in these fields.