React.js +中间人是如何为缓存和SEO工作的



我最近一直在探索react.js,并将其与middleman结合使用。我真的很喜欢middleman,因为它提供静态资产,易于快速托管。它还允许您缓存整个页面。

现在我的理想目标是让用户来到我的网站,提供静态资产,然后有反应填充动态数据。这看起来很棒,但随后SEO就成了一个问题。幸运的是,react提供了服务器端渲染,但它与页面缓存的关系并不完全清楚。

所以从我目前的理解,当服务器受到反应,它只创建一个字符串的html与初始化数据放入。通常,从示例中填充的数据为空。然后,当客户端点击并填写基于api的数据并填充html时,它会被召回。虽然我不明白为什么这是SEO友好,显然它是。

然后我意识到我应该仍然能够缓存react用字符串创建的整个实例,然后提供它,然后react仍然可以在seo友好的情况下填充它。这是否像我想要的那样工作,或者在react生命周期中哪里不工作?

是的,您完全可以缓存生成的标记字符串。

唯一需要注意的是,你在服务器上传递的道具应该与你在客户端传递的道具完全匹配,这样初始呈现的标记才会匹配,否则React将被迫抛弃服务器呈现的标记并从头开始。(如果标记不匹配,React的开发/未压缩版本会给你一个警告。)

最新更新