@LoveCodeandCoffe

Как отдать на клиент страницу с данными из бд [2020 React SSR with Hook]?

Доброго времени суток. Делаю первые шаги ( ну не совсем первые около месяца подсел на эту тему) С редером реакт приложения на стороне сервера. Для своего проекта я не стал использовать NEXT.js ( там бы я смог решить свою проблему с получением данных и выдаче клиенту страницы уже с данными , прям из коробки с помощью встроенного в next способа.) Но я не пошел по этому пути. Для рендера реакт приложения на стороне сервера, я использую библиотеку RAZZLE. Мне она очень понравилась , можно использовать с CRA вообще без проблем . Кастомизируй как хочешь.
Благополучно прикрутил react-router, Helmet , Redux. Методом renderTostring получаю готовый html передаю на клиент все здорово.

Застрял я с данными. Не знаю правильно ли я понял. Но ,логика возможно должна быть такая. Сначала Сервер отдает разметку без данных . Потом на стороне клиента идет запрос на получение данных. После чего сервер используя метод renderToNodeStream, должен выполнить 2 рендер на стороне сервера и выдать уже html страницу с данными. И моя проблема в том, что я не понимаю, как инициировать 2 рендер на стороне сервера. Видел пару примеров как это делают используя классовые компоненты react — объявляют компоненту статичный метод, который затем вызывается на сервере. Но вот беда я использую хуки а useEffect не работает на сервер(. Вообщем засел с этим. И не могу нигде найти статью или пример. Работающего приложения с использованием хуков
  • Вопрос задан
  • 89 просмотров
Пригласить эксперта
Ответы на вопрос 1
@twoone
ssr должен отдавать законченную разметку содержащую всю необходимую информацию. Иначе в нем попросту нет смысла. Запросы к БД это асинхронные операции, а рендер реакта нет. Вызов рендера сравним с вызовом обычной функции, которая вернет результат по выполнению. Она конечно запустит асинхронные обращения к БД, но дожидатся их окончания не будет. Поэтому хуки, которые не являются сервисами, а предназначены для иметации тела класса, не способны разрешить вашу проблему. Хуки созданы для разделения логики работы непосредственно с шаблоном между компонентами. Вы должны строить приложение таким образом чтобы рендер был выполнен со всеми необходимыми данными. Простыми словами работа с данными должа быть вынесена на сервисный слой, который по завершению инициализации используется реактом для получения необходимых данных.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы