用于搜索引擎的 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

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

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