Получение данных из внешнего API перед рендерингом

Question

У меня есть приложение, основанное на React Starter Kit.

Каждая страница имеет функцию извлечения, которая получает данные из API в жизненном цикле componentDidMount.

Я хочу сначала получить данные, а затем отобразить страницу с данными и вернуть ее клиенту. UX в моем случае неважно.

Я знаю, что РСК изоморфен, я готов изменить шаблон или создать свой собственный. Но я не понимаю, как извлечь данные из API перед рендерингом страницы (я имею в виду, как сообщить Express-серверу, какие данные требуются).

Как приложение извлекает данные сейчас:

example_page.js:

import getBooks from 'queries/getAllBooks';
...
class IdTag extends React.Component {
componentDidMount(){
    this.getBooks();
}

  getBooks() => {
    const request = getBooks();
    request
      .then(...)
  }
}

getAllBooks.js:

import doGet from './doGet';

let result = '';

const request = async () => {
  const reqUrl = '/api/books/';

  result = await doGet(reqUrl);

  return result;
};

export default request;

doGet.js:

const request = async reqUrl => {
  let requestResult = null;

  const doQuery = async () => {
    const response = await fetch(reqUrl, {
      method: 'GET',
    });
    const result = await response.json();
    result.status = response.status;

    return result;
  };

  requestResult = await doQuery();
  return requestResult
}
... 
export default request;

server.js:

...
app.get('/api/*', async (req, res) => {
  const newUrl = config.gate.URL + req.url.replace('/api', '');
  const accessToken = req.cookies.access_token;

  const response = await nodeFetch(newUrl, {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  });
  const result = await response.json();

  res.status(response.status);
  res.json(result);
});
...

Answer 1

Если на каждой странице есть вызовы API, то лучше использовать Redux и Redux Saga. Цель Redx Saga - обрабатывать вызовы API. Он будет обрабатывать действия в Q. В тот момент, когда вы вызываете api, используя метод fetch, создайте ниже actioncreators

1) InitialLoading(true) 2) Извлечь создателя действия вызова API-интерфейса 3) В случае успеха создатель ошибки создаст действие действия для сохранения выходных данных метода выборки в хранилище 4) InitialLoading(false)

Answer 2

Вы можете просто установить флаг, когда вы начнете извлекать, и пока он извлекает, возвращайте ноль вместо рендеринга. Что-то вроде:

flag = true;
request = getBooks();
request.then(flag = false);

а потом:

render(){
  if (flag){
    return null;
  } else {
    return this.view;
  }
}