封面图
天台上拍的一张相片
这篇文章将从流行度、性能、文档生态等方面对next.js 和 react 做一个简略的比较。咱们那能够根据正在构建的运用的规模和预期用途，挑选相应开发结构。
web技术在不断发展变化，js的生态系统也在不断的更新迭代，相应的React和Next也不断变化。
作为前端开发人员，可能咱们的项目中已经运用了react, 或者咱们可能考虑鄙人一个项目中运用next.js。了解这两个东西之间的关系或者异同点，能够帮助咱们作出更好的挑选。
React
依照官方文档的解说：
React是一个声明性、高效且灵活的JavaScript库，用于构建用户界面。它答应咱们从称为“组件”的代码片段组成杂乱的UI。
React的主要概念是虚拟DOM，虚拟的dom对象保存在内存中，并通过ReactDOM等js库与实在DOM同步。
运用React咱们能够进行单页程序、移动端程序和服务器烘托等运用程序的开发。
可是，React通常只关怀状态管理以及如何将状态出现到DOM，因此创立React运用程序时通常需求运用额定的库进行路由，以及某些客户端功用。
Next.js
维基百科对Next.js的解说：
Next.js是一个由Vercel创立的开源web开发结构，支撑根据React的web运用程序进行服务器端烘托并生成静态网站。
Next.js供给了一个生产环境需求的一切特性的最佳开发体验：前端静态模版、服务器烘托、支撑TypeScript、智能绑定、预获取路由等，一起也不需求进行装备。
React 的文档中将Next.js列为推荐的工具，建议用Next.js+Node.js 进行服务端烘托的开发。
Next.js的主要特性是：运用服务器端烘托来减轻web浏览器的担负，一起一定程度上增强了客户端的安全性。它运用根据页面的路由以便利开发人员，并支撑动态路由。
其他功用包含：模块热更新、代码主动拆分，仅加载页面所需的代码、页面预获取，以削减加载时间。
Next.js还支撑增量静态再生和静态站点生成。网站的编译版别通常在构建期间构建，并保存为.next文件夹。当用户发出请求时，预构建版别（静态HTML页面）将被缓存并发送给他们。这使得加载时间十分快，但这并不适用于一切的网站，比如常常更改内容且运用有许多用户输入交互的网站。
Next.js vs React
咱们能够简略做个比较：
| Next.js | React |
|---|---|
| Next 是 React 的一个结构 | React 是一个库 |
| 能够装备需求的一切内容 | 不行装备 |
| 客户端烘托 & 服务端烘托 而为人们所知 | – |
| 构件web运用速度十分快 | 构建速度相对较慢 |
| 会react上手十分快 | 上手稍显困难 |
| 社区小而精 | 十分庞大的社区生态 |
| 对SEO 优化较好 | 需求做些支撑SEO 优化的装备 |
| 不支撑离线运用 | 支撑离线运用 |
利害分析
在看了上面的比较之后，咱们可能对应该挑选哪个结构有一些自己的主意。
React的优势:
- 易学易用
- 运用虚拟DOM
- 可复用组件
- 能够做SEO优化
- 供给了扩展才能
- 需求较好的笼统才能
- 强有力的社区
- 丰富的插件资源
- 供给了debug工具
React的下风:
- 发展速度快
- 短少较好的文档
- sdk更新滞后
Next.js的优势:
- 供给了图片优化功用
- 支撑国际化
- 0装备
- 编译速度快
- 即支撑静态站也能够进行服务端烘托
- API 路由
- 内置CSS
- 支撑TypeScript
- 搜索引擎优化友好
Next.js的下风:
- 短少插件生态
- 短少状态管理
- 相对来说是一个比较固定的结构
选 Next.js 仍是 React ？
这个不太好直接下结论，由于React是一个用于构建UI的库，而Next是一个根据React构建整个运用程序的结构。
React有时比Next更合适，可是有时分Next比React更合适。
当咱们需求许多动态路由，或者需求支撑离线运用，或者咱们对jsx十分了解的时分，咱们就能够挑选React进行开发。
当咱们需求一个各方面功用都很全面的结构时，或者需求进行服务端烘托时，咱们就能够运用next.js进行开发。
最后
尽管React很受欢迎，可是Nextjs供给了服务器端烘托、十分快的页面加载速度、SEO功用、根据文件的路由、API路由，以及许多共同的现成特性，使其在许多情况下都是一种十分便利的挑选。
尽管咱们能够运用React达到同样的目的，可是需求自己去了解各种装备，装备的进程有时分也是一件十分繁琐的事情。