В настоящее время я экспериментирую с несколькими мыслями и концепциями, касающимися использования рендеринга на стороне сервера (SSR). До сих пор я решил использовать NestJS, поскольку он позволяет мне использовать шаблон MVC, к которому я очень привык из PHP. Однако до сих пор я узнал, что в общем случае клиент отправляет только оболочку HTML и передает ее дополнительными данными (PWA).
Но я хотел бы сделать так, чтобы мой контент отображался на сервере и добавлял интерактивность клиенту по мере его поступления, а затем брал с него и продолжал отображать, как если бы это был PWA.
До сих пор я обнаружил, что фреймворки, такие как Vue и React - и другие - имеют метод с именем .hydrate(), который работает как их обычный метод .render(), только он принимает существующий HTML и повторно использует этот метод. присоединять к ним слушателей и обработчики, сводя к минимуму необходимость рендеринга на клиенте. Это увеличивает нагрузку на сервер, но значительно сокращает «время до контента» на клиенте. Кроме того, он сохраняет множество функций SEO для поисковых систем, у которых нет функций сканирования JawaScript, таких как Google.
Однако, похоже, что гидратацию можно проводить только - и, пожалуйста, поправьте меня, если я ошибаюсь, - если выполняются следующие условия:
- Маршрутизация на стороне сервера и на стороне клиента идентична. Например, сервер и клиент должны иметь одинаковые доступные компоненты и один и тот же маршрутизатор.
- Гидратация работает только в одной и той же структуре (React не может визуализировать Vue). Это вполне понятно, так как это конкретная реализация.
Таким образом, чтобы это работало, мне пришлось бы «по существу» написать свое приложение, ориентированное на сервер, как это было на клиенте, а затем настроить WebPack - или любой другой пакет - для создания почти такого же приложения для клиента, за исключением обработка сервера (HTTP).
Но так ли это на самом деле? Можно ли на самом деле динамически создать страницу, отправить ее клиенту и позволить клиенту взять на себя управление оттуда, даже до точки, где он может выполнить какой-либо дополнительный рендеринг?
Чтобы продемонстрировать, что я хочу сделать, рассмотрим следующий поток событий:
- Клиент подключается к серверу, запрашивая
/foo. (HTTP/1.1 GET /foo)
- Сервер обрабатывает запрос и генерирует частичное, содержащее только то, что нужно ввести в
<body>.
- Часть вставляется в оболочку HTML, которая включает ссылку на клиентский скрипт
client.js.
- Клиент получает выходные данные процесса рендеринга и запускает
client.js.
- Клиент использует компоненты в
client.js для увлажнения содержимого HTML-документа, отправленного сервером.
- Теперь пользователь нажимает на ссылку, ведущую к
/bar.
- Клиент выдает серверу запрос на
/bar. Но вместо того, чтобы возвращать другой полный HTML-документ, только частичный - или просто объект JSON - отправляется обратно.
- Клиент вставляет частичное в документ, гидратирует его еще раз и восстанавливает интерактивность. Сайт теперь фактически ведет себя как PWA, хотя изначально он отображался на сервере.
Я бы хотел придерживаться NestJS из-за его концепции MVC. Но я хотел бы знать, возможна ли эта идея смешанного опыта SSR / PWA?
Спасибо!