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

Question

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

我真的很喜欢基于网页的结构和Next.js的预加载链接的前景。然而，我不确定什么时候你会达到下一个，而不是CRA，甚至是弹出的CRA。

谢谢!

Answer 1

我也是一样的。我从CRA开始创建了一个SPA，这是一个很好的开始，并克服了学习曲线。但我很快意识到了两个重要的问题：

社交网络上的

1. 分享:我无法更改每条路线的OGP标签。这样做的效果是，当在社交网络上共享时，只有您的基本路由(使用OGP标签正确设置)才能生成卡(twitter术语)，而您共享的任何其他路由基本上都将显示为空白。Facebook和LinkedIn也是如此。参见here.
2. Search引擎优化:虽然有几篇关于搜索引擎能够正确地抓取你的SPA进行索引的文章，但根据我的经验，它并不令人满意。例如，在Google中，我注意到只有主页被编入索引，并且没有被正确解析。来自不同元素的不同标题连接在一起。Bing，似乎没有索引它。可能是谷歌索引了它，因为我已经使用谷歌的搜索控制台索引了主页。如果我必须为每个新页面手动重新建立索引，或者在更新页面之后，这不是一个可行的解决方案。

Create-React-App :用于创建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 )。设置CI/CD管道的成本会稍微高一些，工作也会多一点。

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

Answer 2

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

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

Answer 3

我自己也在做这个研究。我的理解是Next.js提供了开箱即用的服务器端渲染。Create React App不能做到这一点，所以你需要为SSR提供你自己的解决方案(比如更快的页面加载和SEO)。