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

假装没事ソ 提交于 2021-02-04 01:06:30

翻译自 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的成本或麻烦。

其他精彩文章

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!