What is the difference between NextJs and Create React App

我正在试图找出 下一个创建应用程序之间的区别。我知道这两者都是为了让我们的生活更轻松,同时开发我们的前端应用程序使用 ReactJ

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

NextJs 提供服务器端呈现(SSR) ,同时创建 React App 提供客户端呈现(CSR) ,SSR 提高 申请载入。

但是从发展的角度来看其他参数如何呢

用 NextJS 或 CRA 开发的 Web 应用程序的可维护性和可伸缩性?

打印脚本和 React Hook/Redux 支持

或者你甚至可以指导我,如果我做了一个错误的比较?

83032 次浏览

React is just a JavaScript library, and on the other hand, Nextjs is a React framework. SSR is one of the benefits of Nextjs, But there are many other benefits. Nextjs can do everything react does, and on top of that, it has features that react alone doesn't have. Checkout the documentation for nextjs here: https://nextjs.org/docs/getting-started

我用过 NextJ 和 CRA。这两种框架都可以用来快速入门,并提供良好的开发人员体验。但是,这两种方法都有更好的用例。我会试着根据其中的一些因素来比较它们。随时建议编辑与其他点或评论

服务器端渲染

CRA 下一个
CRA 不支持战略科学军团。< br > 但是,您仍然可以配置它。< br > 使用您首选的服务器和配置设置 SSR 需要更多的努力。开发团队在不久的将来还没有支持这个的计划。对于这个用例,它们是 建议使用其他工具 NextJ 有 不同类型的战略科学军团。它支持开箱即用的战略科学军团。静态生成: 在构建时获取数据。这对于诸如 blog 或静态网站 < br > * 服务器端呈现这样的用例效果最好: 为每个请求获取数据并呈现。当需要为不同的用户提供不同的视图时,必须这样做。

可配置性

我认为这是这些工具非常不同的一点,你的决定可以取决于这个因素

CRA 下一个
创建 React 应用程序不会给您留下很多空间来配置它。除非 < br/> 偏离正常的 CRA 方式(弹出、重写、重新连接、 craco) ,否则不能更改 webpack 配置等配置。基本上,您必须使用在作为 CRA 核心的 < br/> react-scripts中配置的内容。 几乎所有的东西都是 可配置的。如果您检查示例 NextJs 模板,您可以看到诸如 < br/> babelrcjest.configeslintrc etc < br/> 这样的文件,您可以配置它们。

可维护性

CRA 下一个
CRA is very opinionated.
If you keep updated with the releases of CRA, it's not hard to maintain.
NextJs 也得到了很好的维护,它们定期发布更新。

打印稿

CRA Next.js
支持开箱即用。你可以使用 < br > npx create-react-app my-app --template typescript的类型脚本初始化 CRA 应用程序 支持打印脚本 开箱即用。 < br/> 使用 touch tsconfig.json开始配置打印脚本

Hooks support

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


复制支持

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

Create React App 只是一个 React 项目创建引擎,可以帮助您快速设置 React 项目。在运行完 CRA 脚本 abc 0之后,你会得到一个漂亮干净的单页应用,你可以运行它。在引擎盖下面,你还可以看到诸如 babel,eslint,jest,webpack 等已经设置好的东西,所以这是开始做 React 开发的一种非常方便的方式。如果您需要对这些工具的配置进行更多的控制,那么您仍然可以使用 npm run eject

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

无论你选择什么,最终,它将是反应编码。零件JSX支持 TypeScript反应钩和所有其他反应的核心方面将支持任何一种方式。因此,您可以期待类似程度的可维护性。另一方面,可伸缩性取决于你的选择: 如果你选择 Next.js,你将把应用托管在一个服务器基础设施上,这个基础设施的大小应该根据你的用户而定,而用 CRA 创建的 React bundle 只需要静态托管在某个地方。

TLDR

最大的区别是两个项目的目的。 NextJS: JAM Stack静态站点生成器 创建 React App: 是一种官方支持的创建单页 React 应用程序的方法。

Explanation:

This conundrum is true for many opensource projects. Seem alternative of other but they have key differences. For Example in this case Although both projects use ReactJS as front end and produce webapps. the problem they solve are very distinct. 在 js 中有一些重叠的特性主题/模板。 but development and future work will be to enhance project such that it helps solve there problem statement in better way.

例如,NextJS 将尝试包括是否有任何新的 Markdown 特性开发。但在 CreateReactApps 中却不是这样。

Suggestion.

从你的问题,似乎你正在寻找这些项目开发反应本地应用程序。所以我建议使用创建应用程序。

你的比较应该主要是这个项目是否与我正在解决的问题一致。 那就比较一下。 支持可维护性、可伸缩性、类型脚本和 React Hook/Redux。

如果需要更多的信息做评论。