如何让 reactjs 为 SEO 提供静态页面答案

【问题标题】：How to make reactjs serve static pages for SEO如何让 reactjs 为 SEO 提供静态页面
【发布时间】：2016-08-06 10:38:06
【问题描述】：

我有这个 reactjs webapp - http://52.26.51.120/

它加载单个页面，然后您可以单击链接以在同一页面上动态加载其他板...例如 52.26.51.120/#/b、52.26.51.120/#/g

现在的问题是，我希望每个页面都是一个单独的页面，用于 seo。我希望你能够谷歌“my-site.com g”，你会看到结果 52.26.51.120/#/g。如果您使用的是 reactjs，这显然行不通，而且它都在一页上。 Google 只会呈现和缓存该主页（它甚至可以呈现该页面吗？Google 会执行 javascript 吗？）

更具体地说，id 想要 my-site.com/g/1234 之类的东西来加载线程。每天可能有一千个线程，所以我不知道如何处理。

有什么解决办法吗？允许响应可能将静态页面作为 html 提供，以便它们可以缓存在谷歌上？我现在使用 expressjs 和 webpack 作为我的服务器，所有代码都在 jsx 文件中执行。

谢谢

【问题讨论】：

搜索“react 通用”、“react 同构”或“react 服务器渲染”，你会发现很多教程。如果您在服务器上使用 JavaScript，那么您已经成功了一半。
好吧，我明白你的意思，但我似乎无法弄清楚如何使用 url 中的参数来实现，所以 express 中的路由类似于 ("/:board")，然后它将它传递给 jsx 文件，该文件将为该参数返回一个自定义 html
关于服务器端渲染，服务器只会渲染初始的index.html文件和Javascript，然后通过ReactRouter将路由处理传回客户端。因此，任何来自app.get('/*') 的请求都会由客户端与服务器处理。

标签： express reactjs webpack react-router jsx

【解决方案1】：

我怀疑你可以用 nginx 做一些智能配置，当检测到用户代理是机器人而不是典型用户时，它可以将 domain/board 的 url 转换为 domain/#/board 的重定向。

【讨论】：

【解决方案2】：

您可以使用Prerender.io 服务。简而言之，您需要将您的服务器应用程序或 Web 服务器与预渲染服务连接起来，并进行少量设置（请参阅文档）。之后，搜索引擎和爬虫将获得静态（预渲染）内容，而用户将获得经典的 React.js（或任何其他单页）应用程序。

有一个免费的托管服务或open source version

【讨论】：