Как правильно загружать данные при серверном рендеринге + react router v4?

Question

[Shaks]

Пилю изоморфное/универсальное приложение. Не совсем пойму как правильно работать с данными.
В своем server.js, для того чтобы пропсы наполнялись данными перед рендером, я реализовал это:

routes.some(route => {
        const match = matchPath(req.url, route);
        if (match && typeof route.loadData === "function"){
            promises.push(store.dispatch(route.loadData()));
        }

        return match
    });

    Promise.all(promises).then(() => {
// после того как получил все данные - делаю рендер
}

После того, как верстка с контентом отдается браузеру, срабатывает уже клиентский рендер компонентов. И вот на этом месте у меня загвоздка.
Когда компонент маунтится, он должен выполнять подгрузку данных с бекенд сервера. Но эта подгрузка уже была реализована на сервере буквально мгновение назад (при условии что переход к этому компоненту не был реализован через реакт-роутер, а посредством ctrl+r например).
Вопрос в следующем - как избежать повторых запросов к бекенду с клиента (если был запрос с фронтенд-сервера), и стоит ли?

Answer 1

[Никита Гущин]

Вам нужно любым удобным способом сохранить информацию о том, что данные были загружены. Это можно сделать как на уровне загрузчика

// что-то вроде этого
promises.push(
  store
    .dispatch(route.loadData())
    .then(() => store.dispatch(dataForRouteLoaded(req.url))
)

И позже, на клиентской стороне, проверять флаг. В этом случае вам скорее всего будет нужно сделать отдельный компонент (HOC) для загрузки данных - чтобы такую проверку сделать в одном месте:

Когда компонент маунтится

Либо в каждом конкретном экшене проверять есть ли требуемые данные в state перед их загрузкой.

Comments

[Shaks]

я думал над этим. По сути достаточно проверять наличие данных в состоянии, и при их отсутствии делать запрос. Но тут возникает уже проблема "актуальности" данных. Значит еще нужно запоминать время в UTC последнего запроса.. Короче какие-то костыли. Я подумал что возможно есть какое-то более элегантное решение.