Next.js & Nuxt.js 简介

最近两天学习了下 Next.js，了解了下其作用及应用场景。

Next.js，是由 vercel 团队开发的一款基于 React 的全栈框架。vercel 先不介绍了，后面有机会可以单独写一篇文章来介绍。为何说是全栈框架呢？通常定义的全栈是：前端 + 后端。前端有了（React），后端是 vercel 定义的云函数（包括无服务器函数和边缘计算）。下面针对 Next.js 的相关特性作介绍。

Next.js

Next.js 中存在很多约定（往往框架就是这样的，制定出一系列合理的约定，大家参照这个规则进行开发），比如：在 Next.js 中，存在页面的概念。页面的前后端代码，都放置在同一个文件夹下；比如 Next.js 中自己实现了前端路由部分，不确定是否能引入其他路由库？比如服务端渲染时，定义的几个关键方法，是否存在暗示了什么，都是约定好的。

其实我理解的 Next.js 最主要的还是前端部分的功能。api 实现作为锦上添花。

服务端渲染

这里不过多介绍原理及场景等基本问题，就单 Next.js 里的约定来简单讨论下。

Next.js 中将服务端渲染分为了两类：静态渲染和动态渲染。

静态渲染

比较好理解，就是在构建阶段直接生成出对应的 html 文件。好处是：

• 利于 SEO；
• 作为静态资源可缓存；
• 首屏体验更好；
• 其他没想到的好处…

动态渲染

也比较好理解。在每次请求到来时，动态生成 html 再返回。好处是：

• 也可以 SEO；
• 首屏体验更好；
• 通过配置，也可以实现缓存；
• 其他没想到的好处…

但劣势也很明显，每次请求都需要服务端执行一次。如果没有部署服务端的话，是无法动态渲染的。

哪种服务端渲染方式好呢？

没有绝对的。可以参考官方链接。简而言之就是：

• 如果在用户请求前就能渲染页面的话，那就静态渲染（比如静态的说明页等）；
• 不能完全静态渲染的话，就：
  • 页面中可以部分静态渲染，部分客户端数据请求后再渲染；
  • 也可以完全动态渲染

所以说，还是看应用场景。

开发体验

偏重约定，要记得各个文件夹下的资源类型，记得各个导出函数的作用。在开发过程中，以下体验还是不错的：

• typescript，eslint 支持
• 内置路由库
• 提供云函数的实现
• 提供快捷部署方案

辅助库

Next.js 生态中提供了许多官方辅助库，这里介绍几个：

next/image

使用了懒加载，也解决了 Layout Shift 的问题。

next/script, next/head

作为注入script， head 的组件。

总结

上文介绍的非常简略，有兴趣的可以去官网看一下文档。Next.js 还是非常适合全栈项目的快速开发的。

Nuxt.js

Nuxt.js 和 Next.js 就差了一个字母，作为选择项，也是最主要的：Next.js 是基于 React，Nuxt.js 是基于 Vue。双方的差异不是很大。

这里也简单介绍下 Nuxt.js。

• 支持服务端渲染 & 静态生成
• 各种约定
• 没有类似后端的集成