javascript 何时使用 React 框架，例如 Next 或 Gatsby vs Create React App

When to use a react framework such as Next or Gatsby vs Create React App

提问by Vince Picone

I'm in the sort of rapid prototyping phase of my React/javascript learning experience. I was wondering when folks would reach for a framework such as Next.js or Gatsby.js vs the standard Create React App.

我正处于我的 React/javascript 学习经验的快速原型设计阶段。我想知道人们什么时候会使用 Next.js 或 Gatsby.js 这样的框架，而不是标准的 Create React App。

I really dig the page based structuring and prospect for preloading links of Next.js. However, I'm not sure when you would reach for Next as apposed to CRA or even ejected CRA.

我真的很喜欢基于页面的结构和预加载 Next.js 链接的前景。但是，我不确定您什么时候会接触到与 CRA 相关的 Next 甚至被驱逐的 CRA。

Thanks!

谢谢！

回答by dparkar

I am in the same boat. I started with CRA to create a SPA which was great to start with and get over the learning curve. But I soon realized two important issues :

我在同一条船上。我从 CRA 开始创建一个 SPA，它非常适合开始并克服学习曲线。但我很快意识到两个重要问题：

1. Sharing on social networks : I was unable to change the OGP tags per route. The effect of that is, only your base route (setup correctly with OGP tags) when shared on a social network can produce the card (twitter term), any other route you share will basically show as blank. This is true for Facebook and LinkedIn as well. See here.
2. Search Engine Optimization : Though there have been few articles about search engines able to crawl your SPA correctly for indexing, in my experience it hasn't been satisfactory. For e.g. in Google I noticed that only the home page is indexed and it's not parsed correctly. Separate titles from separate elements are concatenated together. Bing, doesn't seem to have indexed it. May be Google indexed it because I have indexed the home page using Google's Search Console. It's not a feasible solution if I have to re-index manually for every new page or after an update to a page.

1. 在社交网络上分享：我无法更改每条路线的 OGP 标签。这样做的效果是，只有您在社交网络上分享的基本路线（正确设置了 OGP 标签）才能生成卡片（推特术语），您分享的任何其他路线基本上都会显示为空白。Facebook 和 LinkedIn 也是如此。见这里。
2. 搜索引擎优化：虽然很少有关于搜索引擎能够正确抓取您的 SPA 以进行索引的文章，但根据我的经验，它并不令人满意。例如，在 Google 中，我注意到只有主页被编入索引，并且没有正确解析。来自不同元素的单独标题连接在一起。Bing，似乎没有将其编入索引。可能是 Google 将其编入索引，因为我已使用 Google 的 Search Console 将主页编入索引。如果我必须为每个新页面或在更新页面后手动重新索引，这不是一个可行的解决方案。

Create-React-App : A really good bootstrapper tool to get started with to create a SPA.

Create-React-App ：一个非常好的引导程序工具，可以开始创建 SPA。

Gatsby/React-Static : Similar to Create-React-App but produces HTML build output instead thus "pre-rendering". I am yet to experiment with this. I am hopeful that this would resolve (1) and (2) since I can now have different OGP tags already in the HTML being served from a static site server (S3/Azure Blobs/Github Pages) instead of them being changed locally after the fetch. I am not sure if this will work yet. The added advantage here is, since Gatsby already pre-renders during build time, the user experiences better performance. (May be someone experienced with Gatsby can clarify, or I will edit this answer after I am done.) Update (2/19/2018) : I can confirm that (1) is solved by Gatsby.js while still hosted as a static website.

Gatsby/React-Static ：类似于 Create-React-App 但产生 HTML 构建输出而不是“预渲染”。我还没有尝试过这个。我希望这会解决 (1) 和 (2)，因为我现在可以在从静态站点服务器（S3/Azure Blob/Github 页面）提供的 HTML 中已经有不同的 OGP 标签，而不是在本地更改它们之后拿来。我不确定这是否会奏效。这里的额外优势是，由于 Gatsby 已经在构建期间进行了预渲染，因此用户体验到了更好的性能。（可能有 Gatsby 经验的人可以澄清，或者我会在完成后编辑这个答案。）更新（2/19/2018）：我可以确认 (1) 已由 Gatsby.js 解决，同时仍作为静态托管网站。

Next.js : If Gatsby doesn't solve (1) and (2), Next.js will be my fall back to create a full blown SSR app. The issue here is, now I am going to have to use PaaS to host the site (e.g. Azure Web Apps or AWS ElasticBeanStalk or Heroku) instead of a static site hosting service (Azure Blob, AWS S3, Github Pages). This will be slightly costlier and bit more work to setup CI/CD pipelines.

Next.js ：如果 Gatsby 没有解决 (1) 和 (2)，Next.js 将成为我创建一个完整的 SSR 应用程序的后备。这里的问题是，现在我将不得不使用 PaaS 来托管站点（例如 Azure Web Apps 或 AWS ElasticBeanStalk 或 Heroku），而不是静态站点托管服务（Azure Blob、AWS S3、Github Pages）。这将稍微昂贵一些，并且设置 CI/CD 管道需要更多的工作。

Also see these alternativeslisted on CRA's docs.

另请参阅CRA 文档中列出的这些替代方案。

回答by Khaled Garbaya

I recently did a lot of research myself about this topic especially create-react-app vs Gatsby.js and I found out that Both tools let you write react code right away without worrying too much about the setup. However, Gatsby, for example, offers on top of that, server-side rendering at build time which is crucial for SEO. You don't need any server to render your views which is the case for Next.js because they are already done at build time. when a user visits your website the HTML version will be loaded first and once the javascript is loaded your website will become a fully functional react web app.

我最近自己对这个主题进行了大量研究，尤其是 create-react-app 与 Gatsby.js，我发现这两种工具都可以让您立即编写 React 代码，而无需过多担心设置。但是，例如，Gatsby 在构建时提供了最重要的服务器端渲染，这对 SEO 至关重要。你不需要任何服务器来渲染你的视图，Next.js 就是这种情况，因为它们已经在构建时完成了。当用户访问您的网站时，将首先加载 HTML 版本，一旦加载了 javascript，您的网站将成为功能齐全的 React Web 应用程序。

The good thing is they all share the same view layer so you can move from one tool to another. you can check moving from create-react-app to Gatsby.jswhich goes into details.

好消息是它们都共享相同的视图层，因此您可以从一种工具移动到另一种工具。您可以查看从 create-react-app 迁移到 Gatsby.js 的详细信息。

回答by typeoneerror

I'm doing this research myself. My understanding is that Next.js provides Server-Side Rendering out of the box. Create React App does not do this so you need to provide your own solution for SSR (for things like faster page loads and SEO).

我自己也在做这项研究。我的理解是 Next.js 提供了开箱即用的服务器端渲染。Create React App 不会这样做，因此您需要为 SSR 提供​​您自己的解决方案（例如更快的页面加载和 SEO）。

回答by typeoneerror

create-react-app is best for both building website and mobile apps(react native apps) because lots of learning curves available. other two are the react frameworks(we can say).

create-react-app 最适合构建网站和移动应用程序（反应原生应用程序），因为有很多可用的学习曲线。另外两个是反应框架（我们可以说）。

use Gatsby for single page website faster and easy to deploy. use Next.js while working with REST APIs (i guess...)

将 Gatsby 用于单页网站更快且易于部署。在使用 REST API 时使用 Next.js（我猜...）

it's up to you. a good developer always find his/her way for easy and fast work.

由你决定。一个优秀的开发人员总能找到他/她轻松快速的工作方式。