NextJs 和 Create React App 有什么区别
What is the difference between NextJs and Create React App
我正在尝试找出 NextJs and Create React App. I know both are there to make our life easier while developing our Front-end Apps using ReactJs.
之间的区别
在浏览了 Google 上的一些文章后,我发现主要区别在于
NextJs provides server side rendering (SSR) while Create React App
provides client side rendering (CSR) and SSR improves performance of
Application Loading.
但是从开发的角度来看其他参数呢
使用 NextJS 或 CRA 开发的 Web 应用程序的可维护性和可扩展性?
Typescript 和 React Hooks/Redux 支持?
或者如果我比较错误,你甚至可以指导我?
React 只是一个 JavaScript 库,另一方面,Nextjs 是一个 React 框架。 SSR 是 Nextjs 的好处之一,但是还有很多其他的好处。 Nextjs 可以做 React 做的所有事情,除此之外,它还具有 React 本身所没有的功能。在此处查看 nextjs 的文档:https://nextjs.org/docs/getting-started
我用过 NextJs 和 CRA。这两个框架都可以用来快速上手并提供良好的开发者体验。但是,这两者都有用例,其中任何一个都表现得更好。我将尝试根据其中一些因素对它们进行比较。随意提出带有附加点或评论的编辑建议
服务器端渲染
CRA
Next.js
CRA doesn't support SSR out of the box.
However, you can still configure it.
It just takes more effort to setup SSR with your preferred server and configuration. The development team doesn't have plans to support this in the near future. They suggest other tools for this use case.
NextJs has different types for SSR. It supports SSR out of the box.
* Static generation: fetch data at build time. This works best for use cases like blogs or static websites
* Server side rendering: fetch data and render for each requests. You have to do this when you need to serve different view for different users.
可配置性
我认为这是这些工具非常不同的地方,您的决定可能取决于这个因素
CRA
Next.js
Create React App doesn't leave you a lot of room to configure it.
Configurations like webpack config cannot be changed unless
you stray away from normal CRA way (eject, rescripts, rewired, craco).
Basically, you have to use what's configured in
react-scripts
which is the core of CRA.
Almost everything is configurable.
If you check the example NextJs templates, you can see files like
babelrc
, jest.config
, eslintrc
etc
that you can configure.
可维护性
CRA
Next.js
CRA is very opinionated.
If you keep updated with the releases of CRA, it's not hard to maintain.
NextJs is also well maintained. They release regular updates.
打字稿
CRA
Next.js
Supports out of the box. You can initialize CRA app with typescript with
npx create-react-app my-app --template typescript
Supports typescript out of the box.
Start with configurations for typescript with touch tsconfig.json
挂钩支持
CRA 和 NextJs 的最新版本安装了支持 hooks 的 React 版本。您也可以轻松升级到最新版本
Redux 支持
Redux 是一个可以与这两种工具一起使用的库。
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 包只需要静态托管在某个地方。
TLDR
最大的区别是两个项目的目的。
下一个JS:JAM Stack or Static Site Generator
Create React App : 是一种官方支持的创建单页 React 应用程序的方法。
解释:
许多开源项目都存在这个难题。似乎是其他的替代品,但它们有关键的区别。例如在这种情况下虽然两个项目都使用 ReactJS 作为前端并生成 webapps。他们解决的问题非常不同。
js 中有一些重叠的功能 themes/templates。
但开发和未来的工作将是增强项目,以帮助以更好的方式解决问题陈述。
即如果开发了任何新的 Markdown 功能,NextJS 将尝试包含在内。在 CreateReactApps 中不会是这种情况。
建议。
从您的问题来看,您似乎正在寻找这些项目来开发 React Native 应用程序。所以我建议使用 Create React App。
你的比较应该主要是这个项目是否符合我正在解决的问题。
然后比较。
可维护性、可扩展性、Typescript 和 React Hooks/Redux 支持。
如果需要更多信息,请发表评论。
react 是一个 javascript 库,而 next js 是一个建立在 react 基础上的框架,它极大地增强了 react 应用程序并使构建大型 react 应用程序变得更加容易,next js 的主要优点是 build-in Server-side rendering (SSR) wich automatically pre-renders your page on the server and makes your app run much faster SSR also helps with SEO optimization the next key feature is also its build-in File-based Routing 而在 React 中你必须安装 React Router 包并手动添加路由,next js 也可以用作后端,你可以在同一个项目中混合你的后端和 React 代码,而无需创建一个 API ,因为它可以做 SSR 它也可以执行 server-side 代码,如存储数据、获取数据、身份验证等。我个人认为 next js 是一个非常强大的工具,每个 React 开发人员都应该掌握.
我正在尝试找出 NextJs and Create React App. I know both are there to make our life easier while developing our Front-end Apps using ReactJs.
之间的区别在浏览了 Google 上的一些文章后,我发现主要区别在于
NextJs provides server side rendering (SSR) while Create React App provides client side rendering (CSR) and SSR improves performance of Application Loading.
但是从开发的角度来看其他参数呢
使用 NextJS 或 CRA 开发的 Web 应用程序的可维护性和可扩展性?
Typescript 和 React Hooks/Redux 支持?
或者如果我比较错误,你甚至可以指导我?
React 只是一个 JavaScript 库,另一方面,Nextjs 是一个 React 框架。 SSR 是 Nextjs 的好处之一,但是还有很多其他的好处。 Nextjs 可以做 React 做的所有事情,除此之外,它还具有 React 本身所没有的功能。在此处查看 nextjs 的文档:https://nextjs.org/docs/getting-started
我用过 NextJs 和 CRA。这两个框架都可以用来快速上手并提供良好的开发者体验。但是,这两者都有用例,其中任何一个都表现得更好。我将尝试根据其中一些因素对它们进行比较。随意提出带有附加点或评论的编辑建议
服务器端渲染
CRA | Next.js |
---|---|
CRA doesn't support SSR out of the box. However, you can still configure it. It just takes more effort to setup SSR with your preferred server and configuration. The development team doesn't have plans to support this in the near future. They suggest other tools for this use case. |
NextJs has different types for SSR. It supports SSR out of the box. * Static generation: fetch data at build time. This works best for use cases like blogs or static websites * Server side rendering: fetch data and render for each requests. You have to do this when you need to serve different view for different users. |
可配置性
我认为这是这些工具非常不同的地方,您的决定可能取决于这个因素
CRA | Next.js |
---|---|
Create React App doesn't leave you a lot of room to configure it. Configurations like webpack config cannot be changed unless you stray away from normal CRA way (eject, rescripts, rewired, craco). Basically, you have to use what's configured in react-scripts which is the core of CRA. |
Almost everything is configurable. If you check the example NextJs templates, you can see files like babelrc , jest.config , eslintrc etc that you can configure. |
可维护性
CRA | Next.js |
---|---|
CRA is very opinionated. If you keep updated with the releases of CRA, it's not hard to maintain. |
NextJs is also well maintained. They release regular updates. |
打字稿
CRA | Next.js |
---|---|
Supports out of the box. You can initialize CRA app with typescript with npx create-react-app my-app --template typescript |
Supports typescript out of the box. Start with configurations for typescript with touch tsconfig.json |
挂钩支持
CRA 和 NextJs 的最新版本安装了支持 hooks 的 React 版本。您也可以轻松升级到最新版本
Redux 支持
Redux 是一个可以与这两种工具一起使用的库。
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 包只需要静态托管在某个地方。
TLDR
最大的区别是两个项目的目的。 下一个JS:JAM Stack or Static Site Generator Create React App : 是一种官方支持的创建单页 React 应用程序的方法。
解释:
许多开源项目都存在这个难题。似乎是其他的替代品,但它们有关键的区别。例如在这种情况下虽然两个项目都使用 ReactJS 作为前端并生成 webapps。他们解决的问题非常不同。 js 中有一些重叠的功能 themes/templates。 但开发和未来的工作将是增强项目,以帮助以更好的方式解决问题陈述。
即如果开发了任何新的 Markdown 功能,NextJS 将尝试包含在内。在 CreateReactApps 中不会是这种情况。
建议。
从您的问题来看,您似乎正在寻找这些项目来开发 React Native 应用程序。所以我建议使用 Create React App。
你的比较应该主要是这个项目是否符合我正在解决的问题。 然后比较。 可维护性、可扩展性、Typescript 和 React Hooks/Redux 支持。
如果需要更多信息,请发表评论。
react 是一个 javascript 库,而 next js 是一个建立在 react 基础上的框架,它极大地增强了 react 应用程序并使构建大型 react 应用程序变得更加容易,next js 的主要优点是 build-in Server-side rendering (SSR) wich automatically pre-renders your page on the server and makes your app run much faster SSR also helps with SEO optimization the next key feature is also its build-in File-based Routing 而在 React 中你必须安装 React Router 包并手动添加路由,next js 也可以用作后端,你可以在同一个项目中混合你的后端和 React 代码,而无需创建一个 API ,因为它可以做 SSR 它也可以执行 server-side 代码,如存储数据、获取数据、身份验证等。我个人认为 next js 是一个非常强大的工具,每个 React 开发人员都应该掌握.