搜索引擎的 ReactJS 服务器端异步答案

【问题标题】：ReactJS server side async for search engines搜索引擎的 ReactJS 服务器端异步
【发布时间】：2016-03-31 08:11:16
【问题描述】：

我正在使用 ReactJS + Router 渲染我的网站服务器端我的许多组件都会调用 REST 来生成内容。此内容不会作为 HTML 服务器端发送，因为它是异步调用。

一个可能看起来像这样的组件：

import React from 'react'
import ReactDOM from 'react-dom'
// Imports omitted

export default class MyPage extends React.Component {
    constructor() {
        super();
        this.state = {items: []};
            fetch("http://mywebservice.com/items").then((response) => {
                response.json().then((json) => {
                    this.setState({items: json.items})
                }).catch((error) => {});
            });
    }

    render() {
        if (this.state.items && this.state.items.length > 0) {
            var rows = [];
            // Go through the items and add the element
            this.state.items.forEach((item, i) => {
                rows.push(<div key={item.id}></div>);
            });
            return <div>
                    <table>
                         {rows}
                    </table>
            </div>;
        }
        else {
            return <span>Loading...</span>
        }
    }
}

搜索引擎会索引“正在加载...”，而我显然希望我的元素（项目）被索引。有没有办法解决这个问题？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

结帐react-async (https://www.npmjs.com/package/react-async) 或react-async-render (https://www.npmjs.com/package/react-async-render)

听起来正是你所需要的。

【讨论】：

【解决方案2】：

理论上，我认为为了实现您需要在服务器端请求处理程序，收集所有必要的数据并将其作为初始状态 JSON 字符串传递给 ReactDOM.RenderToString()，然后创建自定义 fetch()，它将检查是否初始数据存在，如果存在则立即渲染html。

【讨论】：

【解决方案3】：

redux 如此受欢迎的原因之一是它强制执行数据分离。理想情况下，您可以在一个地方指定应用程序需要呈现的所有数据。在 redux 中，这将是一个商店，但我们假设您将所有数据存储在最顶层元素的 props 中。如果是这种情况，您需要做的就是为该最顶层元素提供所有相关的道具，它会很好地渲染所有内容。不过，收集所有所需数据的方法取决于服务器。我建议从当前 url 和登录用户信息（无论是令牌还是 cookie）中获取线索。

【讨论】：