概述

这次 Node.js 服务框架的调研将着点于各框架功能、请求流程的组织和介入方式，以对前端 Node.js 服务设计和对智联 Ada 架构改进提供参考，不过多关注具体实现。

最终选取了以下具有代表性的框架：

• Next.js、Nuxt.js：它们是分别与特定前端技术 React、Vue 绑定的前端应用开发框架，有一定的相似性，可以放在一起进行调研对比。
• Nest.js：是“Angular 的服务端实现”，基于装饰器。可以使用任何兼容的 http 提供程序，如 Express、Fastify 替换底层内核。可用于 http、rpc、graphql 服务，对提供更多样的服务能力有一定参考价值。
• Fastify：一个使用插件模式组织代码且支持并基于 schema 做了运行效率提升的比较纯粹的偏底层的 web 框架。

Next.js、Nuxt.js

这两个框架的重心都在 Web 部分，对 UI 呈现部分的代码的组织方式、服务器端渲染功能等提供了完善的支持。

• Next.js：React Web 应用框架，调研版本为 12.0.x。
• Nuxt.js：Vue Web 应用框架，调研版本为 2.15.x。

功能

首先是路由部分：

• 页面路由：
• Next.js：由于 React 没有官方的路由实现，Next.js 做了自己的路由实现。
• Nuxt.js：基于 vue-router，在编译时会生成 vue-router 结构的路由配置，同时也支持子路由，路由文件同名的文件夹下的文件会变成子路由，如 article.js，article/a.js，article/b.js，a 和 b 就是 article 的子路由，可配合 组件进行子路由渲染。
• 相同的是两者都遵循文件即路由的设计。默认以 pages 文件夹为入口，生成对应的路由结构，文件夹内的所有文件都会被当做路由入口文件，支持多层级，会根据层级生成路由地址。同时如果文件名为 index 则会被省略，即 /pages/users 和 /pages/users/index 文件对应的访问地址都是 users。
• 不同的是，根据依赖的前端框架的不同，生成的路由配置和实现不同：
• api 路由：
• Next.js：在 9.x 版本之后添加了此功能的支持，在 pages/api/ 文件夹下（为什么放在pages文件夹下有设计上的历史包袱）的文件会作为 api 生效，不会进入 React 前端路由中。命名规则相同，pages/api/article/[id].js -> /api/article/123。其文件导出模块与页面路由导出不同，但不是重点。
• Nuxt.js：官方未提供支持，但是有其他实现途径，如使用框架的 serverMiddleware 能力。
• 动态路由：两者都支持动态路由访问，但是命名规则不同：
• Next.js：使用中括号命名，/pages/article/[id].js -> /pages/article/123。
• Nuxt.js：使用下划线命名，/pages/article/_id.js -> /pages/article/123。
• 路由加载：两者都内建提供了 link 类型组件（Link 和 NuxtLink），当使用这个组件替代 标签进行路由跳转时，组件会检测链接是否命中路由，如果命中，则组件出现在视口后会触发对对应路由的 js 等资源的加载，并且点击跳转时使用路由跳转，不会重新加载页面，也不需要再等待获取渲染所需 js 等资源文件。
• 出错兜底：两者都提供了错误码响应的兜底跳转，只要 pages 文件夹下提供了 http 错误码命名的页面路由，当其他路由发生响应错误时，就会跳转到到错误码路由页面。

在根据文件结构生成路由配置之后，我们来看下在代码组织方式上的区别：

• 路由组件：两者没有区别，都是使用默认导出组件的方式决定路由渲染内容，React 导出 React 组件，Vue 导出 Vue 组件：

• Next.js：一个普普通通的 React 组件：

  export default function About() {
      return <div>About usdiv>
  }
  复制代码
  

• Nuxt.js：一个普普通通的 Vue 组件：