Passionate about development for many years, two brothers named Alexandre and Sébastien Chopin decided to create the NuxtJs framework together in order to improve the developer experience. Simple, powerful and intuitive are the watchwords of this JavaScript framework.
What is NuxtJs?
NuxtJs is a free, open-source framework based on VueJs and Node.js. It is highly appreciated by developers for its flexibility and its modular architecture.
NuxtJs makes it possible to simplify and speed up development, but also to optimise applications.
The JS framework is best known for developing so-called “universal” or “isomorphic” applications. The code has the distinctive feature of being able to run just as well on the server side as on the client side.
The advantages of developing with NuxtJs
Developing with the NuxtJs framework brings several advantages. The first one worth mentioning is the learning curve. Indeed, because it is based on VueJs and Node.js, the framework uses JavaScript technologies that are already familiar. There is therefore no need for developers to learn a new programming language.
What’s more, NuxtJs makes it possible to develop applications that can run both client side and server side with the same code, thanks to SSR (Server Side Rendering). Developers therefore have less code to manage and update, and debugging is simpler.
Unlike VueJs, NuxtJs is self-configured and ready to use. Of course, these default configurations can be modified entirely, but they nevertheless make it possible to start a project with a foundation in place, without having to worry about settings that can prove tedious.
Finally, with NuxtJs the routing system is fully automated, so when you add, modify or delete a page, this is automatically updated in your routes file. All you have to do is create your VueJs page and place it at the root of NuxtJs, in the folder named “pages”. NuxtJs will be able to extract the name of this new page and generate it in the router configuration file.
Three rendering modes offered by NuxtJs
NuxtJs offers three different rendering modes: SPA mode, universal mode and static mode.
SPA mode
The SPA (Single Page Application) mode offered by NuxtJs makes it possible to create single-page applications that will run only on the client side. The pages do not exist on the CDN; they are loaded directly in the user’s browser. With this mode, there is therefore no need to use a server.
Universal mode
The universal mode offered by the NuxtJs framework is also called server-side rendering. It allows developers to build an entire page on the server side and then send it to the client side ready-made. The advantage of this mode is that it allows indexing bots to read the metadata and therefore to index the page correctly. It also leads to a much faster page loading time, thereby improving the user experience.
Static mode
Thanks to static mode and the nuxt generate command, NuxtJs generates the routes file as HTML code at build time. The advantage of this mode is that the website can be deployed to any web host without needing a server in order to run. Indeed, all the code is generated into HTML and JavaScript files, including the API calls.
Feedback from a NuxtJs developer
Grégory has been a front-end developer for three years and works mainly with the VueJs and NuxtJs technologies. We interviewed them in order to get their feedback on the NuxtJs framework.
To introduce the JS framework in broad terms, they describe a tool that makes it possible to combine the best of both worlds, namely SSR (Server Side Rendering) and CSR (Client Side Rendering). NuxtJs keeps the good sides of VueJs while smoothing out most of its drawbacks.
Grégory has now been using NuxtJs for two years. They found the JS framework’s learning curve extremely easy because the documentation is plentiful and very clear. What’s more, the JavaScript framework has a large community that is active on Discord. Grégory even points out that when they are stuck and post their question on the NuxtJs channel, they receive an answer within the following 15 minutes, allowing them to get unblocked quickly.
As for the difficulties encountered day to day, the developer points to the plugins created by the community, which can sometimes prove difficult to integrate. Depending on the plugins already used within the project, integration can be incompatible. They therefore recommend always doing your research thoroughly before using these plugins.
Generally speaking, Grégory is very satisfied with development using NuxtJs, and advises all developers wanting to learn this framework to have good foundations in VueJs, so that they can tell exactly what NuxtJs handles as opposed to VueJs. But above all, you need to be able to use all the shortcuts that make a developer’s life easier, while understanding what happens behind them in order to avoid certain issues and certain bugs.
If your project needs search engine visibility but you want to keep the flexibility of CSR and SSR, whether it is internal or public, and you want to benefit from fast rendering, then VueJs and its NuxtJs framework may be the way to go.
If you enjoyed this article, we invite you to read our article dedicated to VueJs, or to browse our blog to see our latest articles.
