Комментарии 3
Запустить реальное клиентское приложение на сервере нереально сложно — куча граблей. Через webpack что только не подключают с особым извратом ) Самый простой случай с модульным css — игнорировать на сервере его import уже нельзя, в коде нужен объект с названиями css классов. Проще для сервера делать отдельную сборку по тому же конфигу webpack и её запускать. Статик и мета информация должна оказаться в <head>, и нужно определить, что именно вставить в соответствии с отрендеренной страницей. Рендер реакта не умеет это делать. Приложение в браузере спокойно может работать с глобальным контекстом (historyApi, sessionStorage, window...), оно уже изолировано браузером. На сервере же обработка запросов от множества клиентов, и если эта обработка асинхронная, то обязательно нужна изоляции рендеров от разных клиентов. Замыкания функцией express-роутера окажется недостаточным из-за природы клиентского приложения. SSR существенно влияет на архитектуру клиентского приложения, например в nextjs свои роутеры реализовали. А хотелось бы спокойно лепить фронт и при первой необходимости подключить SSR. В этом случаи headless браузера выглядит заманчивым. Рекомендую ещё посмотреть решение на воркерах и сбора статики через @loadable/component — там минимум вмешательства в клиентское приложение https://react-skeleton.ru/docs/develop/ssr/index.md.
Следовательно, начальная загрузка приложения требует значительно больше времени, что означает, что пользователь будет видеть пустой экран в течение довольно долгого времени.
Почему это проблема? Пользоватль же ждёт когда качает приложение из стора? Покажите простенький спиннер с текстом «идёт загрузка...». Если это приложение — значит это какой-то сервис, с помощью которого пользователь хочет что-то сделать полезное (а не просто потреблять контент)… можно и подождать для этого.
Тем не менее, каждый сайт хочет занять первое место в результатах поиска. Когда дело доходит до SPA, этого не очень легко достичь.
При чём тут spa к сайтам?
— SPA — последняя буква означает приложение. Так делайте приложения как spa.
— Сайт — набор перелинкованных между собой страничек, которые представляют собой контент для потребления. Делайте сайты НЕ как spa, а по нормальному — статикой или генерацией на сервере.
Единственный способ исправить это — генерировать HTML на сервере для данной страницы, но только при первой загрузке.
Рендеринг на стороне сервера может быть намного сложнее.
О чём и разговор. Тот кто принимает решение генерировать spa на сервере с последующей «регидрацией» (или как там правильно) — фактически разводит бизнес на деньги, усложняя разработку и поддержку на ровном месте.
Накидал тут Streaming SSR с React 18 и react-query https://github.com/artem-malko/react-ssr-template Может кому-то будет полезно
React Server-Side Rendering (SSR) — руководство новичка