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

Question

我正处于我的React / javascript学习体验的快速原型设计阶段。我想知道什么时候人们会找到像Next.js或Gatsby.js这样的框架与标准的Create React App。

我真的挖掘了基于页面的结构和前景预加载Next.js的链接。但是，我不确定你什么时候可以达到与CRA相关的Next或甚至是CRA。

谢谢！

Answer 1

我在同一条船上。我从CRA开始创建一个SPA，这个开始很棒并且可以克服学习曲线。但我很快意识到两个重要问题：

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

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

Gatsby / React-Static：与Create-React-App类似，但产生HTML构建输出，因此“预渲染”。我还没有尝试过这个。我希望这将解决（1）和（2），因为我现在可以在从静态站点服务器（S3 / Azure Blobs / Github页面）提供的HTML中具有不同的OGP标签，而不是在本地之后更改它们。取。我不确定这是否会奏效。这里的附加优势是，由于Gatsby在构建期间已经预呈现，因此用户体验到更好的性能。 （可能是Gatsby有经验的人可以澄清，或者我会在完成后编辑这个答案。）更新（2/19/2018）：我可以确认（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。

Answer 2

我最近自己做了很多关于这个话题的研究，特别是create-react-app vs Gatsby.js，我发现两个工具都可以让你立即编写反应代码，而不必过多担心设置。但是，Gatsby提供了最重要的服务器端渲染，这对于SEO至关重要。您不需要任何服务器来呈现您的视图，这是Next.js的情况，因为它们已在构建时完成。当用户访问您的网站时，将首先加载HTML版本，一旦加载了javascript，您的网站将成为一个功能齐全的反应网络应用。

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

Answer 3

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

Answer 4

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

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

由您决定。优秀的开发人员总会找到轻松便捷的工作方式。