Реагировать на стороне сервера с запросами на бэкэнд

Question

У меня есть приложение React с рендерингом на стороне сервера через Express. У меня есть простой компонент приложения:

import React, { Component } from 'react'; 

export default class App extends Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     data: [] 
    }; 

    fetch('http://backend', { 
     mode: 'cors', 
    }) 
     .then(res => res.json()) 
     .then(data => this.state.data); 
    } 

    render() { 
    return (
     <ul> 
     {this.state.data.map(item => (
      <li key={item}>{item}</li> 
     ))} 
     </ul> 
    ); 
    } 
}; 

Проблема (или более вероятная функция) заключается в том, что fetch работает async. Таким образом, браузер получает страницу с пустыми данными.

Есть ли способ получить от страницы сервера с загруженными данными? Предположим, я хочу получить с серверной страницы загруженные сообщения или что-то еще.

Или что-то не так?

Answer 1

Правильно вы не устанавливаете state. Используйте setState(), чтобы установить новое состояние, как вы не можете обновить состояние без использования setState() метода: https://facebook.github.io/react/docs/react-component.html#setstate

fetch('http://backend', { 
    mode: 'cors', 
}) 
.then(res => res.json()) 
.then(data => this.setState({data: data})); 

Кроме того, вы добавили код не на стороне сервера визуализации с помощью React. Для выполнения рендеринга на стороне сервера используется метод ReactDOMServer.renderToString(): https://facebook.github.io/react/docs/react-dom-server.html#rendertostring

Answer 2

Да, даже если вы исправите проблему setState(), вы все равно будете рендерить компонент перед извлечением. Проблема в том, что выборка асинхронна.

Чтобы иметь возможность выполнять обратные вызовы на стороне сервера, вам нужно подождать, пока не будут выполнены все обратные вызовы, установите реквизиты & для всех компонентов, а затем визуализируйте их.

Две библиотеки, которые помогут вам разобраться, когда все будет сделано, это повторный набор (https://github.com/markdalgleish/redial) и redux-prom-counter (https://github.com/bitgenics/redux-promise-counter), если вы используете Redux. Подробнее об этом ниже.

Следующая проблема, которую вы хотите решить, заключается в получении этих данных клиенту и инициализации ваших компонентов из-за этого, поэтому вам не придется повторно повторять (все) запросы (запросы) на клиенте.

Вы можете сделать все это вручную, но если вы серьезно относитесь к SSR, вы, вероятно, должны пойти на что-то вроде Redux. Способ хранения всего состояния вашего приложения в одном магазине. Легче хранить результаты, отправлять их клиенту и инициализировать свой магазин у JSON.