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

Question

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

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

谢谢!

Answer 1

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

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

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文档中列出的这些替代方案.

Answer 2

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

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

Answer 3

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