ReactJS服务器端异步搜索引擎

Question

我正在使用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>
        }
    }
}

搜索引擎将索引"正在加载...",而我显然希望我的元素(项目)被索引.有办法解决这个问题吗？

Answer 1

签出react-async（https://www.npmjs.com/package/react-async）或react-async-render（https://www.npmjs.com/package/react-async-render）

听起来这正是您所需要的。