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

搜索引擎会索引 "Loading..." 而我显然希望我的元素（项目）被索引。有办法解决吗？

Answer 1

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

Answer 2

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

Answer 3

结账 react-async (https://www.npmjs.com/package/react-async) or react-async-render (https://www.npmjs.com/package/react-async-render)

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

用于搜索引擎的 ReactJS 服务器端异步

ReactJS server side async for search engines

reactjs

react-router