Nuxt.js，Next.js，Nest.js傻傻分不清？

三者区别

Nuxt.js和Next.js都是服务端渲染框架(SSR)，属于前端框架，Nest.js则是node框架，属于后端框架。

虽然名字看起来都很像但是确实不一样的框架。其中Nuxt.js是vue的ssr框架，Next.js是react的ssr框架，都是比vue和react更上层的前端框架。

SSR框架

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

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

在传统的客户端渲染中，浏览器首先下载一个空的 HTML 页面，然后通过 JavaScript 请求数据并生成页面内容。这种方式的优点是可以提供更丰富的交互和动态效果，但也存在一些缺点。例如，搜索引擎爬虫可能无法正确解析和索引页面内容，导致 SEO（搜索引擎优化）问题。同时，初始加载时用户可能会看到空白的页面或者出现闪烁的内容。

相比之下，服务端渲染通过在服务器上预先生成完整的 HTML 页面，将其发送给客户端浏览器。这样，浏览器在接收到页面时就能够立即显示完整的内容，而不需要等待 JavaScript 的下载和执行。这样可以提高页面的加载速度和首次渲染速度，并且对于搜索引擎爬虫来说更容易解析和索引页面内容，有利于 SEO。

服务端渲染的实现方式通常涉及使用服务器端框架（如Node.js、Java、Python等）来处理请求，并在服务器上生成完整的 HTML 页面。服务器端框架可以使用模板引擎或者直接在后端代码中生成 HTML。一旦生成完整的 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基本上是由vue2，webpack，babel这三个构成的。

Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：

• 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 的目录结构如下：

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 模块支持：内置对 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 的通用应用框架，用于构建服务器渲染的 Vue.js 应用程序

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

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

Next.js：

• 基于 React 的通用应用框架，用于构建服务器渲染的 React 应用程序

• 支持静态生成和服务器端渲染，具有出色的性能和开发体验

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

Nest.js：

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

• 结合了 TypeScript 和面向对象编程的概念

• 基于模块化的架构设计，提供了丰富的功能和插件

简而言之：

• Nuxt.js 和 Next.js 都是用于构建服务端渲染应用的框架，分别基于 Vue.js 和 React

• Nuxt.js 适用于构建 Vue.js 应用程序的 SSR 场景

• Next.js 适用于构建 React 应用程序，支持静态生成和服务器端渲染

• Nest.js 是一个用于构建 Node.js 服务器端应用的框架

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