Nuxt.js vs Next.js vs Nest.js：一篇文章看懂三者区别

三者区别

Nuxt.js 和 Next.js 都是服务端渲染框架（SSR），属于前端框架，Nest.js 则是 Node.js 框架，属于后端框架。

虽然名字看起来很像，但它们是不同的框架。Nuxt.js 是 Vue 的 SSR 框架，Next.js 是 React 的 SSR 框架，都是比 Vue 和 React 更上层的框架。

SSR 框架

先搞清楚什么是服务端渲染。

服务端渲染（Server-Side Rendering，简称 SSR）是一种将网页内容在服务器端动态生成并发送给客户端的技术。传统的客户端渲染（Client-Side Rendering，简称 CSR）是在客户端浏览器中使用 JavaScript 动态生成页面内容。

在传统的客户端渲染中，浏览器首先下载一个空的 HTML 页面，然后通过 JavaScript 请求数据并生成页面内容。这种方式的优点是可以提供更丰富的交互和动态效果，但也存在 SEO 问题和首屏加载慢等缺点。

相比之下，服务端渲染通过在服务器上预先生成完整的 HTML 页面，将其发送给客户端浏览器。这样，浏览器在接收到页面时就能够立即显示完整的内容，提高首次加载速度，同时有利于 SEO。

需要注意的是，服务端渲染不是完全取代客户端渲染，而是根据需求和场景选择合适的渲染方式。

Nuxt

Nuxt 是什么

Nuxt is an open source framework that makes web development intuitive and powerful. Create performant and production-grade full-stack web apps and websites with confidence.

Nuxt 是一个开源框架，它使 Web 开发变得直观和强大。自信地创建高性能和生产级全栈 Web 应用程序和网站。

使用 Nuxt 的条件

• Node.js - v16.10.0 或更高版本

• 文本编辑器 - 推荐使用 Visual Studio Code 并安装 Volar 扩展

• 终端 - 用于运行 Nuxt 命令

创建项目并运行

npx nuxi@latest init <project-name>

cd project-name

npm i

npm run dev

下面来看看 Nuxt 的特性和原理。Nuxt.js 基本上由 Vue 2、Webpack、Babel 这三个构成。

Nuxt.js 集成了以下组件/框架：

• Vue 2

• Vue-Router

• Vuex（当配置了 Vuex 状态树配置项时才会引入）

• Vue 服务器端渲染（排除使用 mode: 'spa'）

• Vue-Meta

压缩并 gzip 后，总代码大小为：57kb（如果使用了 Vuex 特性的话为 60kb）。

特性

• 基于 Vue.js

• 自动代码分层

• 服务端渲染

• 强大的路由功能，支持异步数据

• 静态文件服务

• ES2015+ 语法支持

• 打包和压缩 JS 和 CSS

• HTML 头部标签管理

• 本地开发支持热加载

• 集成 ESLint

• 支持各种样式预处理器：SASS、LESS、Stylus 等

• 支持 HTTP/2 推送

工作流程

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置：

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

自动生成的路由配置：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

Next

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.

Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。您可以使用 React 组件来构建用户界面，使用 Next.js 来实现其他功能和优化。

什么是 Next.js？

Next.js 是一个开源的 React 框架，用于构建服务器渲染（SSR）和静态生成（SSG）的应用程序。它结合了 React 的声明性和灵活性以及服务器端渲染的性能优势。

主要特性

• 服务器渲染和静态生成：提供更快的首次加载时间和更好的 SEO

• 热模块替换（HMR）：在开发过程中实时更新代码并立即看到变化

• 自动代码拆分：只加载当前页面所需的代码

• 路由系统：支持动态路由、嵌套路由等

• CSS 模块支持：组件级别的样式隔离和管理

快速开始

npx create-next-app my-app

// pages/index.js
function HomePage() {
  return <h1>Hello, Next.js!</h1>;
}
export default HomePage;

npm run dev

Nest.js（Node 框架）

什么是 Nest.js？

Nest.js 是一个基于 TypeScript 的框架，用于构建可扩展和模块化的服务器端应用程序。它结合了 Angular 的依赖注入和模块化、Express 的灵活性和 Node.js 的性能优势。

主要特性

• 基于 TypeScript，利用静态类型检查和强类型约束

• 依赖注入：Angular 风格的依赖注入机制

• 模块化编程，提高代码的可维护性和可扩展性

• 强大的路由系统，支持中间件和管道

• 支持多种数据库：MongoDB、MySQL、PostgreSQL 等

快速开始

$ npm i -g @nestjs/cli
$ nest new project-name

import { Controller, Get } from '@nestjs/common';

@Controller('cats')
export class CatsController {
  @Get()
  findAll(): string {
    return 'This action returns all cats';
  }
}

import { Module } from '@nestjs/common';
import { CatsController } from './cats.controller';

@Module({
  controllers: [CatsController],
})
export class AppModule {}

总结

以上就是对 Nuxt.js、Next.js、Nest.js 这三个框架的简单介绍。虽然名字很像，但使用方法和应用场景却不一样：

Nuxt.js：

• 基于 Vue.js 的通用应用框架，用于构建 SSR 应用

• 提供默认配置和约定，快速搭建 SSR 应用

• 集成了 Vue 路由器和 Vuex 状态管理

Next.js：

• 基于 React 的通用应用框架，用于构建 SSR/SSG 应用

• 支持静态生成和服务器端渲染，性能出色

• 可以根据页面的需求选择最佳的渲染方式

Nest.js：

• 用于构建高效、可扩展的服务器端应用的 Node.js 框架

• 结合 TypeScript 和面向对象编程

• 基于模块化的架构设计，功能丰富

简而言之：

• Nuxt.js 和 Next.js 都是用于构建 SSR 应用的框架，分别基于 Vue.js 和 React

• Nuxt.js 适用于构建 Vue.js 应用程序

• Next.js 适用于构建 React 应用程序

• Nest.js 是 Node.js 服务端框架

根据需求和技术栈选择适合的框架将有助于更高效地开发应用程序。