预渲染React应用

Question

我有一个使用React，React Router，Redux和Webpack进行捆绑的应用程序，基本上问题是客户端说SEO不好，因为React的内容或方式会渲染该应用程序，因为如果您去看看来源不存在，我了解到Googlebot可以抓取SPA，我检查了Google抓取方式，页面呈现良好，但是客户认为这是问题所在。 我测试了react-snapshot，prerender-spa-plugin，static-site-generator-webpack-plugin和Next，但是这些都不适合我。我想知道是否存在一种在不更改项目结构的情况下解决该问题的方法，或者至少是不这样做的原因或解释。谢谢

Answer 1

基本上，您可以使用React的server-side rendering功能。

对于每个功能，在响应该页面请求的Node.js服务器中：

1. require(..)是您的根组件。
2. require(..)您的redux商店
3. 调用操作以将商店移动到页面所需的状态-包括获取其需要的所有数据
4. 将商店传递到根组件，然后在其上调用ReactDOMServer.renderToString。注意react router具有special handling用于服务器端渲染，因此请阅读。
5. 在标记的根元素下向用户提供HTML服务器。
6. 在您的商店位于客户端的情况下致电ReactDOM.hydrate。

或者，如果您的代码到处都是window.x并且不能在Node.js中运行-您可以为SEO做其他事情：

1. 检测用户是否为Googlebot-例如spider-detector。
2. 如果是，请使用puppeteer来获取HTML页面的content
3. 将内容提供给蜘蛛网-因为它将等待AJAX​​调用完成并且状态将保持稳定。由于这很昂贵，因此您希望将页面缓存至少几分钟。

请注意，常规用户仍会获得常规的React网站，因为它们没有被检测为爬网程序。

Answer 2

基本上同意楼上的想法（Benjamin Gruenbaum） 区别在于我直接使用puppeteer。

1. 打包项目后，启动一个无头木偶，该无头木偶不会发送任何ajax，它可以获得骨架图。
2. 获取页面的静态内容，并替换您的html。