May 20, 2020

Server-Side Rendering on Nuxt.js

The most used SSR framework up to date. Easy to set up, and open source.
Source: Pixabay

Server-side rendering (SSR) works to render a single page app (SPA) that is client-side only. It sends the rendered page completely to the client. The client running on javascript can then execute the SPA and make it run normally. When rendering, you can easily share it on social media. As when you render on the server-side, the metadata can be gathered to share in one link.  

Nuxt.js is the most powerful framework for the date to build universal server-side rendering applications. The name is based on Next, the React´s SSR framework. The framework has been built by the Chopin brothers. Alex and Sebastien Chopin. The technology gained a lot of popularity in 2018, where a whole community was built around it and they were called to give international conferences describing how it works. They were awarded at the VueConf 2018 for their development.

Why should you use SSR?

The main problem with single-page applications remains the same, search engine crawlers cannot obtain the data of the application as it is needed. Most apps rely on their Search Engine Optimization (SEO). Big companies, startups, and even independent developers pay thousands if not millions to maintain their status on the web.  

Google knows about it and there did an entire software update to solve this problem and couldn't solve it fully. As you can imagine, Google´s engineering team counts with the brightest people in the tech industry. If they couldn't solve it, it´s not because they lack resources, but more about how the system has been created from the beginning. They did quite an improvement in rendering websites that don´t use SSR, but it is still the most recommended act to render your apps on your server too.

Developers… I bring some good news. It is really easy to set up and use Nuxt. All you need to set up is the Vue CLI. You can install it with the following command on your console.

$ npm install vue-cli

Architecture and documentation 

Nuxt architecture is based on Vue.js. There are a couple of exceptions, including pages, middleware, plugin installations, and layout directories. All of these are detailed differences, but in how the software works, it is very similar.

If in the installation process, in the setup or in the running part you feel you can´t do it on your own, you can consult the community and the documentation files. The documentation files can also be accessed through the files.

Nuxt is intended to create modern web applications. Shares the same libraries as Vue.js and the same development tools such as webpack, Babel, and PostCSS. Babel is also used on React applications.  

At the time of optimizing the SEO, it optimizes the way web crawlers transmit information down to the search engine. The server passes the stored information to the client. Normally from Javascript to HTML. HTML is then converted into plain text files that can be understood by web crawlers, and finally, the crawler extracts the links inside the HTML file. In all of this process, sometimes, the web crawler needs help to index the pages on the search engine correctly. That´s when SSR comes to help.

Unless not recommended, you can also use Nuxt without rendering the server-side. For static hosting of your applications. Then you can run the SPA model. the Generate feature allows you to deploy without the need of a Node.js server. If you already have your server running you can include Nuxt.js by using it as middleware. There are no limitations when developing Nuxt applications.

By using Nuxt, you choose to use a powerful modular architecture. There are more than 50 modules to investigate and use. You can add Google analytics and other Google functions to your application directly.

The framework is MIT licensed and open source. Free to use and with no restrictions. Personal investment has to be done as with any software deployment. The software is free to use and they receive donations from many businesses and independent developers which reliably choose them.

Their proven provision of SSR technologies allowed the company to receive their seed round. Even in times of quarantine! The company just received $2M from Firstminute Capital. 

In conclusion, Nuxt, is the most powerful up to date Server Side Rendering Framework. Used by thousands of independent developers and by companies such as Fox News, Gitlab, Nespresso, Bitpay, Roland Garros, among others. The installation is fairly easy and they are the most used SSR framework. The Chopin brothers have contributed to technology for a long time and with Nuxt they have proven they are here to stay. The company was originally called Orion, like the star constellation. The service can be used to develop web applications that render their server-side, or for static hosting. They count with an extensive library and documentation, and their architecture is based on 50 modules.

Tags Server-Side Rendering SSR Nuxt.js
Lucas Bonder
Technical Writer
Lucas is an Entrepreneur, Web Developer, and Article Writer about Technology.

Related Articles