如何比较 NextJS 和 Create-React-App 这两个工具

翻译自 Malcolm Laing

原文:https://medium.com/frontend-digest/whats-the-difference-between-nextjs-and-create-react-app-11b55650a612

应该为你的应用选择哪个工具呢?

在 2021 年创建新的 React 项目时,有两个明确的选择:NextJSCreate-React-AppGatsby 已经失宠了。

由于大规模构建缓慢,NextJS成为更好的静态站点生成器。

让我们回顾一下 NextJSCreate-React-App的优缺点,我们还将介绍哪些用例和场景更适合其中一个。

Create-React-App

Create-React-App 是一个脚手架,它使我们能够为我们创建一个新的 React 应用程序。它将 webpack 和 babel 封装在一起,组成一个新的脚本工具 react-scripts 来管理整个应用,这样会减少很多复杂式,还有学习成本。

这意味着更新那些 “隐藏的” 依赖关系是一件容易的事。等待新版本的 react 脚本,然后进行更新。无需随意修复 webpack 配置的重大更改。

使用 Create-React-App 的优势

比较自由

欢迎您使用任何您喜欢的库,没有规则或建议,您可以使用任何您喜欢的路由库。

在客户端 render(渲染)

由于 Create-React-Apps 在客户端渲染,因此部署非常容易。

您可以将应用程序托管在任何文件主机上,如 s3。客户端渲染的应用程序更易于使用和部署。

Create-React-App 的缺点

很难定制。

如果您需要自定义 Webpack 配置,您唯一的选择是使用第三方工具,如 craco 或 eject(弹出,它本身提供的功能)。

一旦被弹出(eject),你就失去了使用 Create-React-App 的大部分好处。

抽象了复杂性。

如果你要做 Create-React-App 支持的事情,它可以工作得很好,否则会很复杂。

因为它通过隐藏 babel 和 webpack 配置的复杂性,以致于 Create-React-App 可以轻松上手。

但是它阻止开发人员更多地了解这些重要工具是如何工作的。

对搜索引擎优化不好

由于它在客户端提渲染,它与搜索引擎优化作斗争,不应该用于电子商务或营销工作。

NextJS

将 NextJS 与 Create-React-App 进行比较几乎是不公平的,因为 使用 NextJS 的开发者要多得多。

因为 CRA 只是一个脚手架工具,但是 Nextjs 是一个构建 React 应用的框架。

开箱即用,它为您提供服务器端渲染、静态站点生成、无服务器功能等等。

它是一个工具箱,为您提供创建高性能 web 应用程序所需的一切。

使用 NextJS 的优势

快速。

由于服务器端渲染和静态站点生成,NextJS 应用程序飞速发展。

为我们的应用进行许多性能优化,将性能作为默认设置。

它易于部署。

Vercel (NextJS 背后的公司) 使部署全栈 React 应用程序变得容易。

只需点击几下,您就可以建立一个专业的部署管道。这包括预览部署和生产部署。

它为我们提供了 API 路由。

NextJS 为我们提供了一种在应用程序中构建 api 的快速简便的方法。

如果您的应用程序使用第三方 API,您通常需要自己的 API 来代理请求并对令牌保密,NextJS 的 API 路由非常适合此用例。

易于定制。

NextJS 允许我们自定义 babel 或 webpack 配置,添加 webpack 加载器或 babel 插件很容易。

使用 NextJS 的缺点

很固执

NextJS 中只有一种处理路由的方法,您不能自定义它。

NextJS 仅限于其基于文件的路由器,并且动态路由仅在与 NodeJS 服务器一起使用时才可能。

根据应用场合应当如何选择呢?

何时使用 NextJS

当构建落地页面时

NextJS 在制作落地页面和其他营销材料方面大放异彩。

当搜索引擎优化重要时。

在创建电子商务网站时,搜索引擎优化比以往任何时候都更加重要。

由于服务器端渲染,NextJS 在这个技术大放异彩。

当建立这种网站时。

在服务器上渲染我们的应用程序可以减轻客户端渲染的负担。

对于使用较慢设备的用户,这可能导致更快的加载时间。

何时使用 Create-React-App

构建后台应用时

如果您的应用程序仅对经过身份验证的用户可用,那么它将失去服务器端渲染的大部分好处。

对于此用例,客户端渲染的应用程序运行良好,并且更易于托管且更便宜。

构建 web 应用程序时。

Web 应用程序通常从服务器端渲染中获益较少。

它们通常被重复使用的用户使用,我们可以使用缓存为它们提供闪电般的加载时间,而无需 SSR 的成本或麻烦。

其他精彩文章