Nuxt, Next, Nest?! My Head Hurts.

There are currently three similarly named technologies in the JavaScript ecosystem. I can't keep track of them, so I'm going to write a post for my future reference. And hopefully yours too!

Client vs. Server-side Rendering

In order to see the value in these platforms, it's important to understand that out of the box Vue and React are client-side rendered (CSR) frameworks. In that circumstance, a response is sent from the server, the browser downloads JS and executes the framework to render the page so that it is viewable and interactable.
Image Credit Walmart Labs Engineering Blog

Using these platforms as server-side rendered (SSR) means that the server sends a response of HTML directly to the browser for rendering. At that point, the page is viewable. Simultaneously, the browser downloads JS and executes the framework in order to make the page interactable. Image Credit Walmart Labs Engineering Blog

There are many measures of site performance, but one of them is "time to first paint". This is looking at how quickly there is something to see on the page. In that metric and others, SSR is often more performant. That's specifically a consideration of SSR versus CSR, static sites are not part of this calculation (they're often the most performant).

Now, in both cases (Next and Nuxt) the initial app load is server-side rendered. Following that, client-side rendering is used. That's what is called "universal rendering". It's theoretically the best of both worlds.

So, now that we understand the concept, explaining these two technologies is much easier.

What is a universal JavaScript framework?

Nuxt and Next are described as "universal JavaScript frameworks". What does that mean? Well, all it really means is that they support universal rendering.

Nuxt

Nuxt is a framework for universal applications that is based on Vue. It handles all of the configuration to set up a server-side rendered Vue application. This includes setup for webpack, babel and node as well.

Nuxt also supports statically rendered applications.

Next

And here is where we see why these names are so similar. Next does what Nuxt does, but for React applications. It is a framework for building universal applications that leverage React.

So what about Nest?

As it turns out, Nest is where we see a departure. Nest is not an analog of Next and Nuxt at all. As we noted above, those two technologies are focused on bringing the front end server side. Moreover, they support specific front-end frameworks, Vue and React respectively. In contrast, Nest is a server-side framework that doesn't care about front-end code at all.

The goal of Nest is to help you rapidly develop your back-end. It supports both JavaScript and TypeScript. Even though Nest is not related to the front-end, it is described as similar in structure to Angular.

Maybe the best way to keep track of these three technologies is to think of them as Vue, React and Angular!

Instead of an out of the box node application, Nest introduces annotations, best practices folder structures, and associated concepts. All additions that you may be familiar with if you've used technologies like Spring for Java.

Can we tell the difference now?

So let's see if we've got this straight.

Nuxt - Framework to create a Vue application that supports universal rendering

Next - Framework to create a React application that supports universal rendering

Nest - Framework for developing node applications with additional structure and support

And that's it! Hopefully, my own personal cheat sheet helps you as well.