What is Nuxt.js (vs Next)?

I love Next.js: It has such a great developer experience, and the self-contained full-stack nature of the framework means I can get into it immediately without worrying about booting up a server.

However, I love learning. I've taught myself Angular 2+ and React but I always want to learn more. So I've been looking for a good project I can use as an opportunity to learn Vue. I've decided I'd like to try building a French-language tech blog, and that seemed like the perfect opportunity, especially once I saw it also had a Next.js equivalent called "Nuxt".

So what is Nuxt? What does Nuxt do? And is the developer experience up to par with Next.js? Or, to phrase things slightly differently: what does Nuxt have in common with Next, and what are their differences?

What is Nuxt?

Nuxt is a free and open-source web development meta-framework based on Vue.js. It's designed to help developers quickly build server-side rendered (SSR) applications by providing tools and conventions that simplify the development process.

One of the critical features of Nuxt is its ability to generate pages on the server side. This makes it great for building fast, scalable, and SEO-friendly websites.

Next and Nuxt: why full-stack meta-frameworks are gaining so much popularity

My main concern when using a front-end framework like React or Vue is how search engine bots can consume my content. If my website is a single-page application, how do I get Google to drive traffic to this or that page? How do I know how crawling is impacted by having to interpret the client-side code to consume the content?

On the other hand, once you've tasted the fluid user experience of client-side applications, it isn’t easy to return to the full-page reload experience that traditional server-side rendering offers.

Nuxt and Next try to address this issue in two phases. In the first phase, the server renders an initial version of the page (also known as doing server-side rendering or SSR) to make Google's crawler's life easier and improve the page’s first load. This means the meta-data for each page (title, meta-description, etc.) are better managed.

This first version of the page contains the HTML structure of the page, as well as the javascript code which "hydrates" the page, i.e. injects the client-side rending code once the page has been displayed.

When there is no dynamic data on the page, both frameworks can generate static HTML, which can be hosted on a CPU-less solution such as AWS's S3 service that serves files without running any logic.

All this means we have a page displayed quickly but is interactive and does not require a refresh when navigating. This optimises both the SEO and the user experience. In my (not always humble) opinion, they are the future of development because of the improvements they bring in developer experience (or "DX"): changes you make appear right away on the screen, without the need to refresh manually.

What else does Nuxt offer?

NuxtJS also includes several other features that make it easy to build modern web applications, including support for:

• Automatic code splitting: Nuxt automatically splits your code into smaller chunks that can be loaded on demand, which can improve performance and reduce initial load times.
• Middleware: Nuxt includes a middleware system that allows you to define custom middleware functions that can be run on every page request.
• Vuex: Nuxt provides built-in support for Vuex, the official state management library for Vue.js.
• Routing: Nuxt includes a powerful routing system that allows you to define complex routes and handle dynamic parameters.

In short: Nuxt is a powerful and flexible framework for building modern web applications with Vue.js. It's designed to be easy to use and highly customisable, making it an excellent choice for both beginners and experienced developers alike. However, how does it compare to the leading meta-framework in the field, namely Next JS?

Nuxt vs Next: What are Nuxt's developer experience strengths?

I chose a specific angle to compare these two frameworks, a practical case with limited scope but real-world implications: a blog. How can we compare Next and Nuxt from a developer experience point of view? I compared the two solutions across three stages of development:

• Installation: what happens when you install?
• Coding the index page and Markdown content retrieval
• Coding (and creating the laying) of a blog article page

The installation

At installation, Nuxt offers more options. With Next, there is a need to install additional parts afterwards, where Nuxt directly offers to install Typescript or CSS frameworks like Bootstrap, Bulma, Tailwind, and others. Similarly, Nuxt supports the installation of testing mechanisms (and offers different solutions) or lint. Nuxt walks you through the process: everything is already prepared. There's no need for searching the internet (and finding mostly stale information), nor for tedious manipulations. As a result, the developer experience is better when installing on Nuxt.

Content search (creation of the index page)

Nuxt has a particular accessor ($content) which fetches local Markdown content directly, with a syntax inspired by MongoDB. The library allows you to search the content, filter or sort the results, or select neighbouring content (i.e. the next or previous article). This makes content management much more straightforward than what we have in Next, where you must code the content access yourself. So Nuxt wins this point too.

Creating an article page

As with Next, routing (i.e. the association of a URL and content) is based on the filesystem. And page layout is very similar in both solutions. Two things deserve to be highlighted. First: Nuxt installs a Tailwind playground that shows which styles have been activated and what they look like. It's refreshing not to mentally combine the Tailwind documentation and the specifics of the configuration file. Secondly: Nuxt JS offers a built-in editor to edit Markdown content on the fly. You don't have to delve into the source code. It's worth mentioning that Nuxt’s documentation is extensive and offers many examples. One was particularly useful, as it explained how to use Typography, a Tailwind plugin that makes creating a blog layout a piece of cake. Once again, Nuxt offered a better DX.

What does Next offer that Nuxt does not have?

Next.js offers a number of features that Nuxt does not have, including:

• API routes: Next.js includes built-in support for API routes, which allow you to define serverless functions that can handle API requests. This makes it easy to build API endpoints directly into your application without the need for an external server.
• Incremental static regeneration: Next.js supports incremental static regeneration, which allows you to regenerate specific pages in your application at runtime, instead of rebuilding the entire site. This can improve performance and reduce the amount of time it takes to update your site.
• Hybrid rendering: Next.js supports hybrid rendering, which allows you to mix server-side rendering and client-side rendering in the same application. This can help you optimise your application's performance and provide a better user experience.

Overall, Next.js provides a powerful and flexible set of tools for building modern web applications, with a focus on performance and ease of use. While Nuxt has many similar features, such as server-side rendering and a routing system, Next.js offers several additional features that make it a great choice for more complex applications or projects requiring specific optimisation.

As Google Trends shows, interest Worldwide in Next.Js is only rising, with an 80/20 split in favour of Next JS. This translates to a larger ecosystem and better job chances. However, this global view (or should I say, Vue ?) hides regional discrepancies: in Russia, France, and China, Nuxt (and Vue) enjoy a much more significant proportion of the mindshare. You may well find Nuxt a better choice, depending on where you live.

Conclusions… and a choice

On all three points I explored, Nuxt was ahead. If I were starting from scratch and knew Vue as well as I do React, I would probably prefer Nuxt. But that's not the case, at least for now. I'm already familiar with Next JS and React, and I don't know Vue (which is too much like Angular to make me want to learn it). However, if you know Vue or are unfamiliar with React, Nuxt is an excellent choice. Both frameworks have great typescript support. I must also note that Nuxt is more opinionated than Next, so it depends on whether you value flexibility or security more. So: Which of the two frameworks is the best choice for developing web applications? I prefer Next: its ecosystem, the fact that it is a React application that lives on the server. But first and foremost, I hope Nuxt inspires Next developers to take the framework further because there is much to like in Nuxt.