Реагировать на извлечение данных Redux: дифференцировать браузер / серверный метод в изоморфном приложении?

Question

Большинство примеров, с которыми я сталкиваюсь, похоже, всегда извлекают данные из URL.

Но на стороне сервера, не имеет ли смысла получать данные непосредственно из базы данных?

Так что в создателе действий это будет выглядеть примерно так:

if(typeof document !== 'undefined')
  fetch("url/posts").then(response => dispatch(receivedPosts(response))
else
  db.select("posts").then(response => dispatch(receivedPosts(response))

Каковы плюсы и минусы этого метода по сравнению с другими методами извлечения данных?

Answer 1

Большинство приложений React/Redux построены в среде, где существует различие между разработкой API и разработкой пользовательского интерфейса. Часто эти же API-интерфейсы приводят в действие как мобильные приложения, так и другие настольные приложения, поэтому прямой запрос БД, как вы показали, не будет доступен для рендеринга на стороне сервера.

В вашем случае кажется, что вы строите приложение с полным стеком с одной кодовой базой. В этом нет ничего плохого, однако есть некоторые вещи, которые вы, вероятно, должны рассмотреть. Прежде всего, это установление вероятного жизненного цикла приложения. Существует большая разница между забавным небольшим сайд-проектом, разработанным для того, чтобы узнать больше о стеке, стартап-гонках, которые нужно получить, и MVP на рынок, и крупным предприятием, создающим платформу, которая должна масштабировать ворота. Каждый из этих сценариев может привести вас к разным соображениям о том, как проектировать уровни вашего приложения. Один важный вопрос, специфичный для того, над чем вы работаете, заключается в том, могут ли другие приложения / платформы нуждаться в доступе к этим же данным, и могут ли разные группы в конечном итоге поддерживать бэкэнд и фронтэнд. С помощью node и mongo очень легко создавать конечные точки API, которые изначально обслуживают ваше приложение React, но позже могут быть использованы, скажем, в приложении IOS. Вы также получите преимущество разделения проблем при обслуживании и улучшении вашего приложения. Отладка часто проще, когда у вас есть доступ к данным и логика пользовательского интерфейса полностью отделены, так как вы можете напрямую вызывать свои API с помощью чего-то вроде почтальона, чтобы определить, предоставляют ли они правильные данные.

В вашем случае может показаться, что вы уже можете передавать данные API из /posts, так что вы можете получить все упомянутые выше преимущества, но при этом пропустить сетевой переход, минуя API, как подсказывает ваш фрагмент кода. Это обеспечило бы меньше точек сбоя при рендеринге сервера и было бы немного быстрее, но вы, вероятно, не наберете большой скорости, и если у вас возникнут проблемы с сетью с вашими API, они сразу же появятся на клиентской стороне приложение, так что преимущества не уходят далеко.

Лично я бы просто делал вызовы извлечения в приложении React и разделял всю мою логику доступа к данным /API таким образом, чтобы перемещение серверной части и клиентской части в два отдельных репозитория не было бы слишком болезненным в будущем. Это позволит приложению стать хорошим местом для его потенциального роста в будущем. Преимущества разделения касаются веса любого небольшого снижения производительности. Если вы испытываете медленную загрузку страниц, то, вероятно, есть множество мест для настройки, часто начиная с самих запросов db.