何时使用React框架，例如Next或Gatsby，而不是Create React App？

Question

何时使用React框架，例如Next或Gatsby，而不是Create React App？

javascriptreactjsframeworksnext.jsgatsby

69

我正在进行React/javascript学习经验的快速原型设计阶段。我想知道何时使用框架，例如Next.js或Gatsby.js，而不是标准的Create React App。

我真的很喜欢Next.js基于页面的结构和预加载链接的前景。但是，我不确定何时会选择Next而不是CRA甚至是已弹出的CRA。

谢谢！

- Vince Picone

欢迎来到stackoverflow，很高兴有你的加入。请阅读如何提出一个好问题？和如何创建一个最小、完整和可验证的示例，以帮助保持stackoverflow内容的最高水平，并增加您获得适当答案的机会。您的问题太过宽泛，因为要回答它，需要知道您的具体要求。 - Axel

5

我希望你能翻译以下内容：“我想了解使用场景，需要使用像Next这样的框架。我并没有特定的用例在脑海中，我更希望从回答中汲取这种知识。”请注意不要改变原意，并使文本易于理解。 - Vince Picone

只是一个建议：谷歌搜索“React vs Next.js vs Gatsby.js”（或类似的内容），然后在此之后或期间询问所有仍不清楚的具体问题... - Axel

@Axel 我谷歌搜索了一下，然后它把我带到了这里。 - norbekoff

@norbekoff 挺有趣的，不是吗...？ - Axel

4个回答

13

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

好处是它们都共享相同的视图层，所以你可以从一个工具移动到另一个工具。你可以查看从create-react-app转移到Gatsby.js，其中详细介绍了该过程。

- Khaled Garbaya

2

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

- typeoneerror

我知道这个问题在2016年就有答案了，但当时的答案不准确，现在也不是。SSR对于SEO并不是必需的。请参考这里一个很好的文章来揭露这个谣言（在此答案发布之前写的）。CRA支持代码拆分，可以加快页面加载速度。希望你的研究让你更好地理解...... - smallstepstoday

1

@smallstepstoday 我之前不知道这个，谢谢你提供的阅读材料！ - typeoneerror

在阅读完这篇文章之后，我仍然认为这是一个问题。也许你第一次阅读时文章还没有更新，但我看到的链接是 https://news.ycombinator.com/item?id=12759605。 - typeoneerror

@typeonerror 多年来一直存在争议，但许多领先的SEO公司中有很多知情人士表示不同意。我认为在这里继续辩论没有意义。话虽如此，这里有另一个很好的例子，说明了我的观点（https://moz.com/community/q/does-google-and-other-search-engine-crawl-meta-tags-if-we-call-it-using-react-js）。 - smallstepstoday

3

最后一条评论……我刚刚在谷歌结构化数据测试工具上测试了一个React应用程序，它现在已经在线上了。我正在特定的React组件中动态添加Json+LD脚本。尽管这些脚本是在初始index.html之外创建的，但该工具正确识别到了这些脚本。该工具在动态添加的脚本前插入了一条注释，如下所示： 对我来说，这证实了其他人所说的内容。 - smallstepstoday

-3

create-react-app非常适合构建网站和移动应用程序（react native应用程序），因为有很多学习曲线可供选择。另外两个是React框架（我们可以这么说）。

使用Gatsby可以更快地创建单页网站并轻松部署。在使用REST API时，请使用Next.js（我猜...）

这取决于你。一个好的开发者总是能找到简单快捷的工作方式。

- user10743059

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dparkar · Accepted Answer

我和你是一样的处境。我开始使用CRA创建单页应用程序，这对于入门和克服学习曲线非常有帮助。但很快我发现了两个重要的问题：

社交网络分享：我无法针对每个路由更改OGP标签。这将导致只有您的基本路由（正确设置了OGP标签）在社交网络上共享时才能产生卡片（Twitter术语），您共享的任何其他路由都将基本上显示为空白。Facebook和LinkedIn也是如此。请参见此处。
搜索引擎优化：尽管有关搜索引擎能够正确爬取您的SPA进行索引的文章很少，但在我的经验中并不令人满意。例如，在Google中，我注意到只有主页被索引，而且没有正确解析。从不同元素分离的标题会被连接在一起。Bing似乎没有索引它。也许是因为我使用了Google的Search Console将主页索引了。如果我必须手动重新索引每个新页面或更新页面后，这不是可行的解决方案。

Create-React-App：一个非常好的启动器工具，用于创建SPA。

Gatsby / React-Static：类似于Create-React-App，但会生成HTML构建输出，因此是“预渲染”。我尚未进行实验。我有希望这将解决（1）和（2），因为现在我可以在静态站点服务器（S3 / Azure Blobs / Github Pages）上提供不同的OGP标签的HTML，而不是在获取后在本地更改。我还不确定这是否有效。这里的附加优势是，由于Gatsby已经在构建时进行了预渲染，用户体验更佳。（也许有经验的Gatsby用户可以澄清，或者我完成后会编辑此答案。）更新（2018年2月19日）：我可以证实Gatsby.js解决了（1），而仍然作为静态网站托管。

Next.js ：如果 Gatsby 无法解决（1）和（2），那么 Next.js 将成为我的备选方案来创建完整的 SSR 应用程序。问题在于，现在我将不得不使用 PaaS 来托管网站（例如 Azure Web 应用程序或 AWS ElasticBeanStalk 或 Heroku），而不是静态站点托管服务（Azure Blob、AWS S3、Github Pages）。这将略微更昂贵，需要更多工作来设置 CI/CD 流水线。

另请参见 CRA 文档中列出的这些替代品。