NextJs 和 Create React App 有什么区别

Question

我试图弄清楚 NextJs 和 Create React App 之间的区别。我知道在使用 ReactJs 开发我们的前端应用程序时，两者都是为了让我们的生活更轻松。

在谷歌上浏览了一些文章后，我发现主要的区别是

NextJs 提供服务器端渲染（SSR），而 Create React App 提供客户端渲染（CSR），而 SSR 提高了应用程序加载的性能。

但是从开发的角度来看其他参数呢？

使用 NextJS 或 CRA 开发的 Web App 的可维护性和可扩展性？

Typescript 和 React Hooks/Redux 支持?

或者，如果我进行了错误的比较，您甚至可以指导我？

原文由 DevLoverUmar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我使用过 NextJs 和 CRA。这两个框架都可用于快速入门并提供良好的开发人员体验。但是，这两个都有用例，其中任何一个都更好。我将尝试根据其中一些因素对它们进行比较。随意提出带有附加点或评论的编辑

服务器端渲染

税务局Next.js CRA 不支持开箱即用的 SSR。

但是，您仍然可以对其进行配置。

使用您喜欢的服务器和配置设置 SSR 需要更多的努力。开发团队没有计划在不久的将来支持此功能。他们为此用例 建议了其他工具。 NextJs 有 不同的 SSR 类型。它支持开箱即用的 SSR。

\* 静态生成：在构建时获取数据。这最适合博客或静态网站等用例

\* 服务器端渲染：为每个请求获取数据并渲染。当您需要为不同的用户提供不同的视图时，您必须这样做。

---

可配置性

我认为这是这些工具非常不同的地方，您的决定可能取决于这个因素

税务局Next.js Create React App 不会给您留下太多配置空间。

webpack config 之类的配置不能更改，除非

您偏离了正常的 CRA 方式（弹出、重写、重新布线、craco）。

基本上，您必须使用中配置的内容

react-scripts 这是CRA的核心。几乎所有东西都是可 配置 的。

如果您检查示例 NextJs 模板，您可以看到类似的文件

babelrc , jest.config , eslintrc 等

您可以配置。

---

可维护性

税务局Next.js CRA 非常有主见。

如果您不断更新 CRA 的版本，维护起来并不难。 NextJs 也维护得很好。他们发布定期更新。

---

打字稿

税务局Next.js支持开箱即用。您可以使用 typescript 初始化 CRA 应用程序

npx create-react-app my-app --template typescript支持开箱即用的打字稿。

从 touch tsconfig.json 的 typescript 配置开始

---

挂钩支持

CRA 和 NextJs 的最新版本都安装了支持钩子的 React 版本。您还可以轻松升级到最新版本

---

Redux 支持

Redux 是一个可以与这两种工具一起使用的库。

原文由 sudo bangbang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Create React App 只是一个 React 项目创建引擎，可帮助您快速设置 React 项目。在运行 CRA 脚本 npx create-react-app <appname> 之后，您将获得一个可以运行的漂亮干净的单页应用程序。在引擎盖下，您还可以获得 babel、eslint、jest、webpack 等已经设置好的东西，因此这是开始进行 React 开发的一种非常方便的方式。如果您需要更多地控制这些工具的配置，您仍然可以使用 npm run eject 。

另一方面， Next.js 是一个基于 React 的框架，用于构建 Node.js 服务器端应用程序。这意味着您将使用相同的面向组件的逻辑来构建页面，并利用 Next.js 路由引擎进行页面到页面的导航。服务器端渲染将允许加载时间随着时间的推移更加分散，因此感知性能可能会更好。也可以使用 Redux，但需要一些额外的步骤才能使其正常工作（参见 https://github.com/kirill-konshin/next-redux-wrapper ）

无论你选择什么，最终都会是 React 编码。 _组件_、 JSX 、 _TypeScript 支持_、 React hooks 以及 React 的所有其他核心方面都将得到支持。因此，您可以期待类似程度的可维护性。另一方面，可扩展性取决于您的选择：如果您选择 Next.js，您将在服务器基础设施上托管应用程序，该基础设施的大小应根据您的受众而定，而使用 CRA 创建的 React 包只需要静态托管在某个地方。

原文由 Sebastien Mornas 发布，翻译遵循 CC BY-SA 4.0 许可协议