loading...
Cover image for Nuxt, Next, Nest?! My Head Hurts.

Nuxt, Next, Nest?! My Head Hurts.

laurieontech profile image Laurie Originally published at tenmilesquare.com ・3 min read

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. Client side rendering diagram
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. Server side rendering diagramImage 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.

Posted on by:

laurieontech profile

Laurie

@laurieontech

Software dev at Gatsby | DC techie | Conference speaker | egghead Instructor | TC39 Educators Committee | Girls Who Code Facilitator | Board game geek | @laurieontech on twitter

Discussion

markdown guide
 

Would also use German frameworks like Näxt, Nüxt or Nöxt

 
 

Coming soon Naxt, the same concept for Angular.

Make angular great again!!

 

Excellent write up Laurie! I'm happy to see how you distinguished NestJS to avoid confusion for others! :)

A nice way for others to think about NestJS for anyone still confused:

Think of it as a superset or abstraction ABOVE Node.js.
It can be interchangeably used with Express or Fastify under the hood.

But it's an amazingly declarative, structured, dependency-injection flavored layer on-top of Node.js that let's you build really organized serverside applications.

Great write up again!

 

That’s a great way of putting it. Appreciate you adding that 😊 I’m always of the belief that multiple explanations help different people understand topics.

 

Definitely!! We've also been experiencing a bit of confusion with Nest (due to the unfortunate name similarity).
You made my day with your spot on explanation!! Bravo :)

Thanks so much :) Was a nice excuse to make sure I knew the differences!

 

It's really difficult to look for info about Nest without getting a lot of Next results XD

 

I actually thought in the beginning it was about elasticsearch's .net client, called NEST :P ...and I thought that's a bit random.

 

I remember first hearing about both Next and Nuxt and not realizing they were different at first... it's all so confusing 🤣 (naming is hard)

Also didn't know about Nest; looks neat - thanks!

 

It's like you swallowed a bee 🐝.

 

Great post! I was a bit confused about these terms, but now I can see these in a clearly way.