javascript - 预渲染 React 应用程序

Question

我有一个使用 React、React Router、Redux 和 Webpack 进行捆绑的应用程序，基本上问题是客户说 SEO 不好，因为 React 上的内容或方式呈现应用程序，因为如果你去看看源不在那里，我知道 Googlebot 可以抓取 SPA，我检查了 Fetch as 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 store
3. 调用操作将商店移动到页面需要的状态——包括获取它需要的任何数据
4. 将商店传递给您的根组件并调用 ReactDOMServer.renderToString在上面。注意 react 路由器有 special handling对于服务器端渲染，请阅读。
5. 在标记的根元素下将该 HTML 提供给用户。
6. 调用ReactDOM.hydrate将您的商店放在客户端。

或者，如果您的代码到处都是 window.x 并且无法在 Node.js 中运行 - 您可以只为 SEO 做一些其他事情:

1. 检测用户是否是 Googlebot - 使用 spider-detector例如。
2. 如果是，使用 puppeteer得到content HTML页面的
3. 改为将该内容提供给蜘蛛 - 因为它会等待 AJAX 调用完成并且状态会稳定。由于这样做的成本很高，因此您希望将页面缓存至少几分钟。

请注意，普通用户仍然可以访问普通的 React 站点，因为他们没有被检测为爬虫。