第129期：Next.js 和 React 到底该选哪一个？

封面图

天台上拍的一张照片

这篇文章将从流行度、性能、文档生态等方面对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
• seo友好

Next.js的劣势:

• 缺少插件生态
• 缺少状态管理
• 相对来说是一个比较固定的框架

选 Next.js 还是 React ？

这个不太好直接下结论，因为React是一个用于构建UI的库，而Next是一个基于React构建整个应用程序的框架。

React有时比Next更合适，但是有时候Next比React更合适。

当我们需要很多动态路由，或者需要支持离线应用，或者我们对jsx非常熟悉的时候，我们就可以选择React进行开发。

当我们需要一个各方面功能都很全面的框架时，或者需要进行服务端渲染时，我们就可以使用next.js进行开发。

最后

虽然React很受欢迎，但是Nextjs提供了服务器端渲染、非常快的页面加载速度、SEO功能、基于文件的路由、API路由，以及许多独特的现成特性，使其在许多情况下都是一种非常方便的选择。

虽然我们可以使用React达到同样的目的，但是需要自己去熟悉各种配置，配置的过程有时候也是一件非常繁琐的事情。