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

заказ react-async (https://www.npmjs.com/package/react-async) или react-async-render (https://www.npmjs.com/package/react-async-render)

Похоже, это именно то, что вам нужно.

Answer 2

В теории, я думаю, что для того, чтобы достичь, что вам нужно на обработчик запроса на стороне сервера, собрать все необходимые данные и передать его ReactDOM.RenderToString() в исходное состояние JSON строку, а затем создавать пользовательские fetch(), который будет проверять, существует ли исходные данные , если да, то он сразу отобразит html.

Answer 3

Одна из причин, почему redux настолько популярен, что он обеспечивает разделение данных. В идеальном случае у вас есть одно место, где вы указываете все приложения приложения для визуализации. В redux это будет хранилище, но давайте предположим, что вы храните все данные в реквизитах самого верхнего элемента. Если это так, все, что вам нужно сделать, это предоставить все соответствующие реквизиты этому самому верхнему элементу, и это сделает все красиво. Однако способ сбора всех необходимых данных зависит от сервера. Я бы предложил получить подсказки для этого из текущего url и зарегистрированной информации пользователя (будь то токен или cookie).