所以我可以肯定地说，我已经获得了一个带有 API 调用的 react SPA，可以在 googlebot 中完美呈现（Fetch and Render）。所以这不是一项不可能完成的任务，但我会说没有太多文档可以帮助您。

由于听起来您有一个新的应用程序，我将概述您可能会走的两条途径。

服务器端预渲染 (SSR)

从服务器端预渲染 (SSR) 开始并坚持下去。在 React 中有很多方法可以做到这一点，这最终意味着您需要坚持使用支持 SSR 的同构库。

但是，通过沿着 SSR 路径走下去，被 google 索引的机会要高得多，因为您根本不必依赖 googlebot 与您的 JS 一起工作。

客户端渲染（一个普通的 JS 应用程序）

只需构建一个没有 SSR 的普通 React 应用程序......基本上一切照旧。好处是您不必处理任何增加的 SSR 复杂性，并且您不受同构库的限制。基本上这是最简单的，但您必须希望您的 JS 能够编译并由 Googlebot 正确运行。

我的观察

我会说服务器端预渲染有时非常难以工作，因为很多库可能不支持它，这反过来又引入了很多你不想处理的复杂性。

客户端渲染路线真的像往常一样，我可以确认它确实与 Googlebot 一起工作。这是我为使客户端渲染工作所做的工作：

1. 尽早将 'babel-polyfill' 添加到我的导入列表中

2. 内联我的 Javascript 以减少整体加载时间并最大程度地减少不必要的调用。我用Razor (C#)做到了这一点，但你可以以任何你想要的方式做到这一点。

3. 添加了对金融时报 polyfill 的外部调用（不确定是否需要）

4. NODE_ENV=production 在这里也有帮助。它会减少捆绑包的整体大小

对于任何使用 C# 的人来说，这可能是这样的：

clientWithRender.jsx（我的jsx的入口点）

import React from "react";
import ReactDOM from "react-dom";
import 'babel-polyfill';

import App from "./App/App.jsx";
import { Router, Route, indexRouter, hashHistory } from "react-router";

ReactDOM.render(
<App></App>,
document.getElementById('App'));

索引.cshtml

<script src="https://ft-polyfill-service.herokuapp.com/v2/polyfill.min.js"></script>
@Html.InlineScriptBlock("~/Scripts/react/react.clientWithRender.bundle.js")

如果您查看2015 年在 Google 网站管理员中心博客上发表的这篇文章，您会发现 google 建议不要在单个页面（或他们称之为 AJAX）应用程序上为 SEO 做任何不同的事情——这将包括react。

他们没有详细介绍他们如何做到这一点，但是只要您的应用程序是按语义构建的并且渲染速度非常快 - 它应该排名。

他们非常重视性能，更快的渲染时间会导致更高的排名。这使得所有单页应用程序都处于服务器端渲染的主要劣势。

如果您需要一些更具体的指导 -这似乎是一个非常好的起点。