Difference between Client Side and Server Side Rendering

Oct 25, 2019

After the introduction of Javascript frameworks like Angular, Vue, React and many others, these terms have become so popular and also a bit not understandable too. So with this post let’s find what do these both mean.

Before deep-diving into the topic, it is very important to know something you might have already known. Generally, a website or a blog is built up with 4 basic components like HTML, CSS, Javascript and a Server Programming language such as PHP, NodeJs or Python Django.

When you create applications with these, all the server logic like database connectivity and so on are performed in the server. But the components like HTML, CSS, and Javascript will be sent to the browser like Chrome (We call it as Client) as a common text file with the appropriate content-type headers. When those files reach the server the HTML and the other components are rendered based on the schematics and an awesome website is displayed. If you aren’t clear, then you can mention your questions in the review section.

Reasons to introduce to this topic:

You might feel like there is no point in learning this. To answer that here comes the content. Websites are made so fast and interactive with the introduction of the Javascript frameworks like Vue js, Angular, React, etc. But whenever there is an introduction of new technology, it will also come up with their own side effects. With the introduction of Javascript frameworks, they came up in the way which affects the website SEO (Search Engine Optimization) performance. SEO is nothing but listing the site on Google. Always developers and company owners will always want their site to come at the top of the results in Google rather than building a website with Javascript Frameworks.

So to overcome this, these terms came into existence. If you are about to learn a Javascript Framework that has a huge market proposition then you should definitely know about this. This is the reason why I have introduced you to this topic.

Server-Side Rendering :

As I have mentioned already, Javascript frameworks actually render on the client-side. With this heading, you would come to know what I am about to say. Yes! With the introduction of some technologies, SSR is made possible for the Javascript Frameworks which is a win-win situation for both the design and also SEO. But still, there are problems with this technique. And this is the technique this is used in the development stage for so so long. The problem with SSR is when a page is loaded first the browser will request the server to send all the files needed for this website and the server will respond with those files based on the URL we made a request from. Yeah, I get it, you feel this is a quite common technique used by all but there is an issue here. Whenever the user moves to another page the process is made again and again to get the required pages. That means the rendering is done in all the pages when a browser is requested to open to a new request URL.

So yes, at this point you feel that both have flaws in this so what is the best way to overcome is to understand the way how the request is made and to provide responses from that. This problem lead to the introduction of a new technique called Pre-Rendering. Let’s see about that.

Pre-Rendering :

This is a great technique that was introduced recently which helps to improve the performance of the web apps built on JS frameworks and also to overcome the about mentioned issues in the other two techniques. This is made possible with frameworks like Preact, Nuxt, etc.

This will create all the routes that you have mentioned in the Javascript app into a static HTML page. As a result, all the pages are actually served with a static page.

The idea used here is that when you make a request to the website or a specific page, it will immediately load the page since they are served with static HTML pages. After that, there will be a kind of loading animation based on the skeleton of the website that you have built. This will show the user to wait for a second for the result to load up instead of just showing nothing which will also improve the User Experience automatically. And the results will be loaded and served with the responses based on the client request.

If you have any question please mention those in the comments so that I can answer them. Also if you have any ideas about new topics to be shared then, mention them too which might become our next post too. Our forum is always open to answer developer questions regarding programming.

Thanks for reading guys, will see you in the next post.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.