Как React на клиенте обрабатывает lazy loading и Suspense при использовании функций ReactDOM.renderToString и ReactDOM.renderToPipeableStream?

Как создать кастомный SSR сервер на реакте для исполнения php кода, подобно Inertia.js, учитывая проблему с отсутствием поддержки lazyload?
  • 12 февраля 2024 г. 10:49
Ответы на вопрос 2
React имеет возможность серверного рендеринга (SSR) через использование `ReactDOMServer`, который предоставляет такие функции как `renderToString()` и в новых версиях `renderToPipeableStream()`. Однако, к нашему сроку знаний (март 2023), `React.lazy` и `Suspense` не поддерживаются полностью в SSR.

`ReactDOMServer.renderToString()` не ожидает загрузки асинхронных компонентов и просто игнорирует их, возвращая пустой фрагмент вместо них. А вот `ReactDOMServer.renderToPipeableStream()` представляет новый механизм для SSR, который потенциально мог бы поддерживать асинхронные компоненты, так как он использует потоки для отправки ответа по мере того как контент готов к этому. Этот подход может использоваться для реализации паттернов, таких как прогрессивный гидратации (progressive hydration).

Если вам необходимо создать сервер React SSR для работы с PHP, подобно Inertia.js, вам потребуется создать Node.js сервер, который будет отвечать за рендеринг React-компонентов и обработку SSR. Чтобы решить проблему с отсутствием поддержки `React.lazy` в SSR, вы можете использовать библиотеки, предназначенные для загрузки асинхронных компонентов на сервере, такие как `Loadable Components`.

Вот шаги для создания базового кастомного SSR-сервера на React, который также может обращаться к PHP-скриптам:

1. Настройте Node.js сервер (используя Express.js или любой другой фреймворк).
2. Используйте `Loadable Components` или аналогичные библиотеки, чтобы обрабатывать асинхронную загрузку компонентов на сервере.
3. Настройте роутинг на вашем сервере так, чтобы он соответствовал роутам на клиенте.
4. Используйте `ReactDOMServer.renderToString()` или `ReactDOMServer.renderToPipeableStream()` для рендеринга компонентов React.
5. Инициируйте запросы к PHP-скриптам через HTTP-клиент (например, axios) из Node.js.
6. Передайте данные от ответов PHP в начальное состояние компонентов React для рендеринга на сервере.
7. Отправьте сгенерированный HTML-код клиенту вместе с начальным состоянием, чтобы позволить гидратацию на клиентской стороне.

Важно отметить, что в данном контексте React на сервере не будет "выполнять" PHP-код напрямую; вместо этого, он будет обращаться к уже работающему PHP-бэкенду через API или другой механизм взаимодействия (например, HTTP-запросы).

Чтобы обеспечить интеграцию с PHP по аналогии с Inertia.js, вы также должны обеспечить согласованное состояние данных между PHP-бэкендом и React-фронтендом. Это может потребовать дополнительного кода для маппинга данных и управления состоянием, а также концепций, подобных тем, которые использует Inertia.js для создания единого слоя приложения.
Вопрос закрыт. 
Всё работает так как и предполагалось, заменяет на fallback и в консоли куча ошибок.
Просто на локальном и на тестовом сервере всё работало шустро и успевало загружать компонент до рендеринга и было всё ок, кроме медленного продакшна...
Похожие вопросы