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 start with the server-side rendering. When a user runs a website that uses server-side UI rendering, the HTML that describes the page can be obtained immediately. In the case of such apps, the initial request loads the page, layout, CSS, JavaScript, and content.
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
In the case of the client-side rendering, after the user sends a request, the page layout, CSS, and JavaScript are loaded. Often some content is not included, and JavaScript has to make another request to have the possibility to generate the required HTML. Let’s take a look at the most important pros and cons of such an approach.
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
JavaScript. JavaScript is the measure of all things. As we have mentioned before, client-side apps provide a user with a high level of performance. But only after the loading of the required JavaScript files is finished. Before that happens, you’ll see a loading animation. Thus, in the case of mobile devices and slow internet, some performance deficiencies may appear.
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.
- Ember.js is an open-source JavaScript web framework, based on the Model–view–viewmodel (MVVM) pattern. It allows developers to create scalable single-page web applications by incorporating common idioms and best practices into the framework.
- Backbone.js is a JavaScript framework that is based on the model–view–presenter (MVP) application design paradigm. Backbone is lightweight since it has only one hard dependency, Underscore.js
