The main aim of this article is to compare two popular approaches to the UI rendering: server-side and client-side.
We’ll check their pros and cons to help you decide whether one of them can replace the other or you’ll have to balance between them following the requirements to your project.
Let’s check the advantages and disadvantages of this approach.
Server-side Rendering Pros
If you’re going to build a website that is mostly static, server-side rendering approach is usually easier to use, especially when you choose some special tools like Jekyll. Since you generate a static HTML, there’s no need to worry about possible SEO issues and your content will be visible to search engines.
Usually, during the loading process, the users see a “white page” or, in the best case scenario, the loading animation. When you create a server-side app, the page loads faster since there’s no need to wait until the browser downloads and runs the code.
Server-side rendering can help avoiding some browser compatibility issues. You leave less job to the browser which eliminates the possibility of unexpected quirks.
Server-side Rendering Cons
Here’s the main disadvantage of a server-side rendered UI. In the case of the server-side rendered apps, the server generates a new page for every interaction with a user. Then, this page should be returned to a user. Such behavior can significantly increase the loading time and may lead to the lack of responsivity.
Server-side UI Libraries
Let’s take a look at the tools that you might find helpful in case you decide to create your own server-side rendered UI:
- Scram.js offers a simple way to use Electron as a server, allowing you to use HTML, Web APIs, and virtually any other client-side tool to write server-side applications.
- The React framework that was created by Facebook allows you to get the speed benefits of rendering on the server. You can render pages both on the server and on the client, which can help search engines to index your pages and reach a better user experience.
- ASP.NET allows using the .NET Framework for creating server-side apps. In this case, apps are written in such languages as C# and VB.NET
Advantages and Disadvantages of Client-Side UI Rendering
Client-Side UI Advantages
First of all, there’s no need to wait until your page is fully reloaded. In the case of the client-side rendering, you don’t need to re-render the full page if only a small part of the page was updated. It can be pretty important in the case if a user browses the web via his mobile device without Wi-Fi available. Instead of that client-side rendering apps can use the so-called lazy loading. It means that an application can load only small portions of data while the user is scrolling the page down.
Client-side approach to the UI rendering implies that all the required data such as business logic and templates is loaded entirely. It makes client-side UI pretty fast and responsive. There’s no need to confer with the server unless you need some data that hasn’t been loaded before.
Modern UI frameworks allow displaying a loading animation and keeping the user interface responsive at the same time, which informs a user that the app still works and there were no freezes.
Client-side rendering allows enabling animated interaction with the user such as fading an element after a user deletes it. In the case of the server-side rendering, such functionality requires maintaining the same code both on the client and on the server side of the app, which may involve additional labor costs and complicate the development process.
You can save some money on web hosting services, since hosting of a bunch of static files is not a big deal, and it won’t cost you much. Moreover, static files are easy to deploy, especially if you use special services for this task.
Client-Side UI Disadvantages
The question of performance is an issue. If you run a server-side rendered app, you can be sure that you can predict the performance of your server. In the case of client-side rendering, the diversity of mobile devices can cause uncertainty about how everything will work.
Crawlers will face troubles while indexing your page. The source of this problem lies in the nature of this approach and caused by the client-side rendering itself. Some workarounds can help to avoid this issue, but there is still no silver bullet.
Client-side UI Libraries
Let’s finish with some libraries that can help you to build a client-side user interface:
- Webix is a fully client side UI library. It can be used with any backend technology and provide PHP, Java, .Net connectors to help you integrate your web app with these client side technologies.