Server Side Rendering (SSR) offers an alternative way to build a web application. Instead of running in the browser, components can be built with HTML on the server and only then sent to the browser - and to the user. It’s possible to create fully interactive apps this way, and the approach provides many benefits. Among the JavaScript frameworks that allow for SSR, we’ve decided to take a closer look at Vue with Nuxt.js, React with Next.js/After.js, and Angular.
The business benefits of server-side rendering
There’s a number of reasons why a development team might choose to use server-side rendering. Chief among them is improved SEO (Search Engine Optimization). Web crawlers get access to a fully rendered page, so you don’t run the risk of them skipping over content that takes too long to load. In fact, the waiting time before content shows up is just as important to the human users of your app, particularly those with older devices or slow internet. Thanks to SSR, they can enjoy the full experience much quicker and are less likely to get discouraged from interacting with your site. Depending on your business, this can have a profound effect on conversion rates.
What is Server Side Rendering?
Most web application use Client Side Rendering. All of their code (including the HTML, CSS and JavaScript) is sent to a client browser, where a framework translates the code into views. This is both good and bad for user experience. If a lot of files (app and framework code) need to be downloaded for the view to work, the user might need to wait for a while, watching a blank page. Search engine and social media bots that can’t execute JavaScript are in the same boat. This can be fixed by rendering HTML code on the server instead, when a request for a page is made. That’s what we call Server Side Rendering.
It might seem like rendering a modern web page shouldn’t be that much work for a browser, but a step-by-step breakdown shows a different story. Scripts need to be downloaded, parsed and ran. Often, there’s data to be retrieved for the app to work properly (e.g. various graphical elements). Finally, the app is rendered in an empty container, and the user can interact with it.
SSR changes things from the first step forward. The HTML sent by the server is already rendered. Then it’s time to download, parse and run scripts, as well as retrieve necessary data. Finally, the HTML (again, already rendered!) is made interactive for the user, who doesn’t have to wait for everything to load completely before they see something meaningful. It’s important to note that the user technically has to wait the same amount of time to begin interacting with the app. But the perceived waiting time is shorter. It might sound small, but in a world as impatient as ours, even a fraction of a second can become a big business advantage.
Angular
For Angular, the front-end web framework maintained partially by Google, Angular Universal is the library for SSR. Angular’s Ahead-of-Time (AoT) compiler [](https://codewithhugo.com/how-components-won-the-framework-wars/#testing-and-server-side-rendering)can compile templates to JavaScript and render functions. The main difference between Angular and the other two frameworks mentioned in this post is that, if you’re using SSR with Angular, you need to have this in mind from the very beginning, or risk reworking some parts of the app down the line. Angular development services are also generally used for bigger apps, so it has a more complex structure.
Vue.js
Often dubbed the progressive JavaScript framework, Vue.js is meant to speed up the creation of APIs and be a very versatile tool for developers. By default, Vue.js uses Client Side Rendering, but with the Nuxt.js framework, SSR becomes an option. Nuxt.js offers a streamlined eperience to developers writing universal Vue.js apps, and it can be used as a static site generator. Vue.js also has the vue-server-renderer package. What’s great about this framework in the context of SSR is that it can start as a simple script tag, and then be easily scaled up through its extensive toolset. Like React, Vue.js provides a Virtual DOM, which can have a positive impact on performance.
React
This JavaScript library’s main use is building user interfaces. It has the built-in ReactDOMServer object and the Next.js and After.js frameworks for SSR. Its main distinguishing feature in this lineup is that it depends on the development team to choose the tools they want to use from the rich React ecosystem - or even to built specialized tools if necessary.
Conclusions
All three of the presented frameworks are perfectly viable options if you’re building a server side rendered app. If you need to make a choice between them, your decision will most likely depend on the frameworks’ other advantages and your team’s familiarity with them.
Want to know which framework is best for your app?
iRonin’s team has been using React, Angular and Vue.js in many commercial projects. Our philosophy is to always choose the best tool for the job.
