Introduce
Today, I will go with you to check out the differences between 3 extremely popular frameworks: Next, Nuxt and Nest. All three frameworks are aimed at server-side rendering (SSR) and are used in React, Vue and Angular, respectively (the three most widely used Front-end frameworks available today).
We will compare based on the following criteria:
- Popularity (Stars on Github and weekly downloads via NPM).
- Installation process.
- Basic Hello World application.
- Advantages.
- Defect.
- Performance.
- Community involvement.
1. Next
Next is more popular than the other 2 frameworks. It has more downloads every week, more stars on Github and more community involvement.
Next is a framework that helps you build an SSR web application as well as a static web application with React.
Installation process
Install via NPM:
1 2 | npm install --save next react react-dom |
Then add scripts to your package.json file as follows:
1 2 3 4 5 6 7 8 | { "scripts": { "dev": "next", "build": "next build", "start": "next start" } } |
Once completed, your file system will be the main API used. All .js files will be automatically processed and displayed.
Basic Hello World application
Create the file ./pages/index.js in your project as follows:
1 2 3 4 5 6 | function Home() { return <div>Hello world!</div>; } export default Home; |
Then you only need npm run dev and visit http://localhost:3000 . To run the project at a different port, you can use the command npm run dev -- -p <port mà bạn muốn>
Advantages
- All components are applied SSR by default.
- The code is automatically clipped to help the page load faster.
- Do not upload unused code.
- Simple (page-based) routing (client-side).
- Webpack-based dev environment with Hot Module Replacement (HMR) support.
- Retrieving data in a very simple way.
- Can be deployed in conjunction with Express or any HTTP Node.js server.
- You can customize Babel and Webpack configuration as you like.
- Easy to deploy anywhere with Node.js support.
- Built-in search engine optimization (SEO) for your pages.
Defect
- Next.js is not a back-end; If you need to handle Back-end like database, account system, … you need to do it in a separate application back-end.
- Next is very powerful, but it is unnecessary to use it just for a simple application …
- All data needs to be downloaded on both the client and server side.
- The transition from a server-side application to a Next.js application is certainly not fast at all, it depends on your project. Sometimes, you will have to spend a lot of effort to do that.
Performance
To measure performance, I used the Apache Bench for benchmarking to help us see the number of requests per second the application can serve. In addition, I use lighthouse to audit performance, accessibility, best practices and SEO.
The basic Hello World application with Next.js can serve 550.87 requests per second (we take the total number of requests divided by the total time), and each request takes about 18,153 seconds to process.
Compared to the other 2 frameworks, Next.js has a higher score than Nuxt.js but not as good as Nest.js (even though I’m a fan of Nuxt.js.
Looking at the lighthouse report, we can see that the performance, accessibility, practicality and SEO scores are all above 70, not bad, but compared to the other two frameworks, Next.js has a low score. best in terms of performance, and highest in practicality.
Community involvement
The Next.js community communicates via chat , slack , issues and pull requests on Github .
In addition, on the awesome-nextjs repo there is also a list of necessary modules, articles, sample projects, extensions, applications, books and videos useful for developers using Next.js.
2. Nuxt
Nuxt.js is a Meta Framework for creating complex, fast, and universal web applications quickly.
Installation process
Install via NPM:
1 2 | npm i nuxt |
And then we create a basic application with just one command:
1 2 | npx create-nuxt-app <tên-project> |
You can start directly with the CLI create-nuxt-app to get the latest updates. Or you can use the existing project templates: Basic Nuxt.js , Nuxt.js + Express , Nuxt + Kao , Nuxt.js + AdonisJS , Nuxt.js + Micro , Nuxt.js + Nuxtent modules for websites have heavy content.
Basic Hello World application
This is the most basic example of Hello World! Use Nuxt:
1 2 3 4 5 6 7 8 9 | <template> <div> <h1>Hello world!</h1> <NLink to="/about"> About Page </NLink> </div> </template> |
Advantages
- The main scope is the UI representation, along with abstracting the client / server distribution.
- Static representation of your Vue application, taking full advantage of the universal application without the need for a separate server.
- Automatic splitting of code (pre-rendered pages)
- Install via command line or use sample project.
- Have a great project structure from the start.
- Easily create conversions between pages as well as write down single file components (Single file components).
- Translating ES6 / ES7 easily without effort.
- Automatically update server when programming applications in development environment.
- Strong routing system along with asynchronous data.
- Serving static files.
- Easy movement between ES6 and ES7.
- Replace the “hot” module quickly in the development environment.
- Pretreatment: LESS, SASS, STYLUS, …
Defect
- The community is small, so the resources and materials may not be much yet.
- Lack of many important and popular components such as Google map, calendar, vector maps …), or have but have not been well maintained and developed.
- It takes time to dig in depth to be able to create your own more flexible components.
- Props must be explicitly declared in components.
- Ability to respond to changes directly to attributes.
- Large amounts of traffic can strain the server side.
- Can only access and manipulate the DOM in certain hooks.
Performance
To measure performance, I used the Apache Bench for benchmarking to help us see the number of requests per second the application can serve. In addition, I use lighthouse to audit performance, accessibility, best pracctices and SEO.
The basic Hello World application with Nuxt.js can serve 190.05 requests per second (we take the total number of requests divided by the total time), and each request takes about 52,619 seconds to process.
Compared to the other 2 frameworks, Nux.js has a bad performance in this clause. 
On lighthouse, however, Nuxt.js has the highest score in terms of metrics, performance, accessibility and SEO.
Community involvement
There is a community organization where you can find modules and projects using Nuxt.js. There is also a list of great things about Nuxt.js available in awesome-nuxt such as modules, tools, Nuxt mentions, descriptions, tutorials, blogs, books, project templates, official examples. , and many projects using Nuxt.js
Communities communicate through Gitter Chat Room , Telegram , Discord , Twitter and YouTube channels .
3. Nest
An advanced Node.js framework for building efficient, scalable, and enterprise-class applications on TypeScript and JavaScript (ES6, ES7, ES8), Nest is heavily inspired by Angular.
Nest is a framework for building efficient, scalable Node.js server-side applications. It uses modern JavaScript, built with TypeScript (maintains compatibility with pure JavaScript), and combines elements of OOP (Object-Oriented Programming), FP (Functional Programming), and FRP ( Functional reaction programming
Under the hood, Nest uses Express, but also provides compatibility with a wide range of other libraries, such as Fastify, for example, allowing for easy use of countless third-party plugins available.
Installation process
Install via NPM:
1 2 3 | npm i @nestjs/cli nest new project-name |
Or you can install a sample project using Typescript from Git
1 2 3 4 5 | git clone https://github.com/nestjs/typescript-starter.git project cd project npm install npm run start |
Basic Hello World application
After installing Nest.js with the npm cli command and creating a new project with nest new tên-project , a src / directory will be created and added some core files, including the main.ts file. The main.ts file includes the async function, which will launch our application:
1 2 3 4 5 6 7 8 9 | import { NestFactory } from '@nestjs/core'; import { ApplicationModule } from './app.module'; async function bootstrap() { const app = await NestFactory.create(ApplicationModule); await app.listen(3000); } bootstrap(); |
And then to run the application on port 3000, you execute:
1 2 | npm run start |
Advantages
- A TypeScript-based web framework that can define strict types.
- The framework is highly annotative, with everything from endpoints to documents Swagger created from them. Endpoints are extremely clean and simple, and annotations make development a lot simpler.
- Directory structure in Nest.js is mainly based on Angular. This allows minimal downtime when designing the Nest service for the first time.
- Because Nest.js is a module-based framework, it makes it easy to externalize general-purpose modules and reuse code in many projects.
- Components have their own directories, with an application module and the main file located in the root directory. This simple structure allows more attention to the design of endpoints and their use, instead of the application architecture.
- Nest.js uses the latest version of TypeScript, which helps ensure that it will remain relevant in a rapidly changing JavaScript context and helps developers to switch context less. Converting from Angular code to Nest is relatively easy.
- Similar to Angular, Nest also has a utility command-line tool, available through NPM, Nestjs / cli. The command-line tool will allow you to create projects, create Nest architecture components, and display project information.
Defect
- The biggest risk that Nest users face is the lack of documentation. The framework has excellent integration with other frameworks, but the documentation is modest and does not include any issues that may arise.
- Nest has an advantage in using TypeScript and is related to Angular, but it does not have the support power of a big business behind it.
- Overall, Nest has a smaller community than other frameworks.
Performance
To measure performance, I used the Apache Bench for benchmarking to help us see the number of requests per second the application can serve. In addition, I use lighthouse to audit performance, accessibility, best pracctices and SEO.
The basic Hello World application with Next.js can serve 928.18 requests per second (we take the total number of requests divided by the total time), and each request takes about 10,774 seconds to process.
Compared to the other 2 frameworks, Nest.js performed better than the other 2 frameworks.
Looking at the lighthouse report, Nest.js has an amazing performance score, but is much inferior to the rest.
Community involvement
There is a team of developers offering handy packages on the NestJS GitHub Community organization. Some of their popular packages are: Nestjs-config , a configuration module for NestJS using dotenv . nest-access-control , role-based access control and attributes for NestJS and Nestjs-flub , as well as intelligent error stack display.
Even if Nest is not the most popular framwork, it is a framework with better performance and many advantages. You should absolutely try it!
The Nest.js community uses spectrum chat and Twitter .
Conclude
As you can see, each framework has its own advantages and disadvantages, which framework you should use to build your website depends very much on practical factors …
Although I know that, myself, I always have a fondness and bias for Vuejs and Nuxtjs.
And you? In your mind, what frameworks are most worth using?