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.
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.
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.
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.
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.
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.