何时使用反应框架，例如 Next 或 Gatsby vs Create React App [关闭]答案

【问题标题】：When to use a react framework such as Next or Gatsby vs Create React App [closed]何时使用反应框架，例如 Next 或 Gatsby vs Create React App [关闭]
【发布时间】：2018-02-11 02:02:51
【问题描述】：

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

我真的很喜欢 Next.js 的预加载链接的基于页面的结构和前景。但是，我不确定你什么时候会像 CRA 一样选择 Next，甚至是逐出 CRA。

谢谢！

【问题讨论】：

欢迎来到 stackoverflow - 很高兴有你。请阅读 How do I ask a good question? 和 How to create a Minimal, Complete, and Verifiable example 以帮助将 stackoverflows 内容保持在尽可能高的水平，并增加获得适当答案的机会。你的问题太宽泛了，因为要回答一个人应该知道你的具体要求。
我希望能够深入了解哪些用例会导致某人使用诸如 next 之类的框架。我不一定有一个特定的用例。我更希望从这里的答案中沉淀出这种知识。
真的只是一个建议：谷歌“React vs Next.js vs Gatsby.js”（或类似的东西），然后问所有之后或中间仍不清楚的具体问题......跨度>

标签： javascript reactjs frameworks next.js gatsby

【解决方案1】：

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

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

这取决于你。优秀的开发人员总能找到轻松快速的工作方式。

【讨论】：

【解决方案2】：

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

好消息是它们都共享同一个视图层，因此您可以从一个工具移动到另一个工具。您可以查看moving from create-react-app to Gatsby.js 详细说明。

【讨论】：

【解决方案3】：

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

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

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

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

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

另请参阅 CRA 文档中列出的 these alternatives。

【讨论】：

Gatsby 或 Next.js，如果配置得当，肯定会解决你的两个问题。我推荐 react-helmet 来管理元标签，它是大多数 Gatsby 初学者的一部分。
很好的答案~！我正处于这个阶段（决定选择哪个框架）。这个话题值一篇文章！所以如果你能把它写成一个独立的文章，请与我们分享~！图表，数据，数字非常感谢！谢谢。

【解决方案4】：

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

【讨论】：

我知道这是在 2016 年回答的，但当时的答案并不准确，因为现在不是。 SEO不需要SSR。请参阅 here 了解揭穿该神话的精彩文章（在发布此答案之前编写）。 CRA 支持加速页面加载的代码拆分。希望您的研究能让您更好地理解...
@smallstepstoday 我不知道这一点，谢谢你的阅读材料！
@smallstepstoday 看完文章，我还是觉得是个问题。也许你第一次阅读时文章没有更新，但我链接到news.ycombinator.com/item?id=12759605
@typeonerror 多年来一直存在争议，但许多领先的 SEO 公司中的许多真正消息灵通的人却有不同的说法。我认为不值得在这里继续辩论。话虽如此，这是我正在谈论的另一个good example。
最后一条评论...我只是在使用 Google 结构化数据测试工具，测试我现在在线的一个 React 应用程序。我在特定的 React 组件中动态添加 Json+LD 脚本。该工具可以正确识别这些脚本，即使它们是在初始 index.html 之外创建的。该工具在动态添加的脚本之前插入注释，如下所示：对我而言，这验证了其他人所说的话。