Po stronie serwera asynchronicznego ReactJS dla wyszukiwarek

Question

Renderuję stronę serwera po stronie ReactJS + Router , a wiele z moich komponentów wykonuje wywołanie REST w celu wygenerowania treści. Ta zawartość nie zostanie wysłana jako strona serwera HTML, ponieważ jest to połączenie asynchroniczne.

składnik, który mógłby wyglądać następująco:

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> 
     } 
    } 
} 

wyszukiwarka będzie wskaźnik "Loading ...", a ja oczywiście chcą moich elementów (przedmiotów), indeksowane. Czy istnieje sposób na rozwiązanie tego problemu?

Answer 1

Zamówienie react-async (https://www.npmjs.com/package/react-async) lub react-async-render (https://www.npmjs.com/package/react-async-render)

Wygląda na to, że to właśnie to, czego potrzebujemy.

Answer 2

W teorii, myślę, że w celu osiągnięcia, że ​​trzeba będzie na stronie serwera żądanie obsługi, zebrać wszystkie niezbędne dane i przekazać je do ReactDOM.RenderToString() jako stan początkowy JSON ciąg znaków, a następnie utworzyć niestandardowy fetch() który sprawdzi, czy początkowe dane istnieje , jeśli tak, to natychmiast wyrenderuje html.

Answer 3

Jednym z powodów, dla których redux jest tak popularny, jest wymuszanie separacji danych. Najlepiej, gdybyś miał jedno miejsce, w którym określisz wszystkie aplikacje danych do renderowania. W reduxie będzie to sklep, ale załóżmy, że przechowujesz wszystkie dane w najwyższych rekwizytach elementu. Jeśli tak jest, wszystko, co musisz zrobić, to dostarczyć wszystkie odpowiednie rekwizyty do tego najwyższego elementu i wszystko będzie ładnie. Sposób zbierania wszystkich potrzebnych danych zależy jednak od serwera. Proponuję uzyskać wskazówki na ten temat z bieżącego adresu URL i zalogowanych informacji o użytkowniku (czy to token czy plik cookie).