Как общаться с БД в React Universal Apps?

Question

[roskom_nadzor]

Я положил глаз на универсальные (изоморфные) SPA, но во всех boilerplates нет адекватных примеров по работе с SQL БД, например Postgre.

Обычно предлагают делать так: делаешь "фронтенд" отдельно, апи отдельно. Что имеется ввиду? То, что на одном сервере должно быть это самое приложение, где сервер выступает в качестве рендера и прокси к апи серверу. А с другой стороны АПИ сервер в котором БД + микросервис.

Я думаю что это overkill и нужен способ общения с БД без лишних абстракций, так как публичное АПИ не нужно.

Answer 1

[Aves]

Где такое предлагают? Вроде наоборот, всё на одном сервере и обычный подход такой:

Component {
  state = Object.assign({}, this.props.initialState);
  componentDidMount() {
     fetch(...).then(data => this.setState(data));
  }
  ...
}

рендер на клиенте:
render(<Component />)
рендер на сервере:

getDataFromDB().then(data => response.send(render(<Component initialState={data} />)))

И SPA без api это что-то странное.

Comments

[roskom_nadzor]

Я использую React вместе с Redux поэтому у меня остались вопросы по архитектуре. Я так понимаю запросы к локальной бд нужно делать в Action Creators? Делать асинхронные Actions и в них делать запросы к бд. Но тут такой вопрос, а нужны ли модели для бд или просто брать в action запросы прямым текстом делать?

А зачем нужен API например в блоге или в примитивном интернет-магазине. А в моём случае это доска объявлений.

[Aves]

roskom_nadzor: с redux тот же принцип. При серверном рендеринге получаются данные из бд и передается в preloadedState функции createStore. Делать что-либо асинхронным бесполезно, метод render синхронный и будет использовать только то, что существует на момент его вызова. Модели к рендерингу вообще отношения не имеют.

А как называется сервис на сервере, у которого компонент запрашивает следующую страницу объявлений?

[roskom_nadzor]

Aves: понял, спасибо. Я действительно запутался. По поводу асинхронных action redux.js.org/docs/advanced/AsyncActions.html смысл в том, что асинхронность достигается за счет разбиения события на ожидаемые состояния, а react рендерит statы reduxa которые изменяются по мере выполнения/невыполнения асинхронных запросов. Так что всё довольно предсказуемо. Правда если отдать клиенту пустой стейт и сказать мол делай запросы к api сам, жди обновления стейата и рендерь, то это уменьшит скорость загрузки сайта, поэтому лучше это сделать на сервере. Это всё так сильно увеличивает сложно приложения, что у меня уже голова взрывается. Я в конце концов остановился над вот этим https://github.com/erikras/react-redux-universal-h... как пример использования api, но как шаблон это очень плохо так как устаревшие зависимости. А вот здесь с зависимостями всё в порядке, поэтому как-то скомбинириую 2 этих шаблона https://github.com/davezuko/react-redux-starter-kit

[Aves]

roskom_nadzor: В первом примере как раз создаётся store, заполняется и готовое передается в render.

асинхронно можно менять state живого смонтированного в DOM компонента. На сервере компонент никуда не монтируется, а преобразуется в строку текста путем последовательно выполнения методов жизненного цикла вплоть до render исключая componentDidMount.

Пустой сайт или заполненный данными играет роль только при первом заходе на сайт, дальше все переключения между страницами всё равно будут с пустыми данными, и компонент должен будет их запрашивать. Можно разве что сделать предварительную передачу данных сервера для всех компонентов, на которые с текущего есть переходы.