Серверный рендеринг (SSR)

Серверный рендеринг (SSR) приложения Inertia может улучшить поисковую оптимизацию (SEO), а также может сократить время до первой отрисовки содержимого (FCP). До сих пор Inertia не предлагала рендеринг на стороне сервера. Однако официальная поддержка приближается! Эта функция будет доступна в первую очередь нашим спонсорам. Пожалуйста, подумайте о поддержке этого проекта! 💜

Как это работает

Проблема с серверными фреймворками JavaScript для рендеринга, такими как Vue, React и Svelte, заключается в том, что они были разработаны для рендеринга в браузере, а не на сервере. К счастью, благодаря Node.js, теперь можно также отображать эти фреймворки на стороне сервера!

Vue, React и Svelte предлагают инструменты SSR, которыми Inertia может воспользоваться. Вот как это работает:

  1. Запрос поступает в ваш серверный фреймворк
    Ваши запросы и ответы по-прежнему полностью управляются выбранной вами серверной структурой. Ваши маршруты, мидлвары и контроллеры подготавливают ответ Inertia, как и обычное приложение Inertia.
  2. Inertia делает запрос к локальному SSR-серверу Node
    Непосредственно перед тем, как Ваше приложение отправит браузеру полный ответ страницы, Inertia берет объект страницы для этого ответа и отправляет его через HTTP на локальный SSR-сервер Node
  3. Сервер Node SSR отображает компонент страницы как HTML
    Используя предоставленный объект страницы, сервер Node знает, какой компонент страницы Vue/React/Svelte визуализировать и какие реквизиты ему передать. Затем он возвращает обработанный HTML-код обратно в Ваше приложение.
  4. Ваше приложение вставляет предварительно обработанный HTML-код в ответ
    Теперь, когда Ваше приложение имеет предварительно обработанный HTML-код для страницы, оно может включать его в HTML-ответ, отправляемый браузеру. Когда клиентская платформа загружается, она может «гидратировать» HTML-код, отображаемый на стороне сервера, вместо повторного рендеринга всей страницы.

Что замечательно здесь, так это то, что из-за архитектуры Inertia объект page , отправляемый на сервер Node SSR, всегда включает в себя все необходимые данные (реквизиты), необходимые для рендеринга компонента страницы.

Это означает, что Вы не столкнетесь с какими-либо проблемами с асинхронной загрузкой данных при выполнении рендеринга на стороне сервера с помощью Inertia. Это очень быстро. Наши тесты показывают, что отрисовка страницы занимает 2ms-50ms, в зависимости от ее сложности.

Также имейте в виду, что Inertia нужно выполнять рендеринг на стороне сервера только для первая загрузка страницы. С этого момента Вы находитесь в «режиме SPA» и получаете обратно нормальные ответы Inertia XHR.

Требования

Хорошо, какие проблемы? Следует знать несколько технических требований.

Во-первых, поскольку мы используем Node для рендеринга на стороне сервера, Вам понадобится Node, установленный на Вашем сервере. К счастью, поскольку Node часто используется на этапах сборки, он очень часто устанавливается.

Во-вторых, Вам нужно запустить небольшой фоновый процесс Node. Если Вы используете современную хостинговую платформу, такую ​​как Heroku или Laravel Forge, ее довольно просто настроить. (Технически Вы могли бы избежать запуска фонового процесса Node и просто выполнить оболочку для Node напрямую. Однако, поскольку Node загружается около 250ms, этот подход приводит к довольно значительному снижению производительности.)

В-третьих, Вы сейчас создаете приложение, которое должно работать как в браузере, так и в Node. Иногда их называют «универсальными» или «изоморфными» приложениями. В общем, это вполне управляемо. Вам просто нужно знать об этом, когда Вы добираетесь до window или document, поскольку они не существуют в Node.

Демо-приложение

Хотите знать, как выглядит приложение Inertia, созданное на стороне сервера? Мы настроили демонстрационное приложение Ping CRM в «режиме SSR», чтобы Вы могли узнать об этом.

Вы можете найти его на ssr-demo.inertiajs.com.

Обязательно просмотрите источник, чтобы увидеть HTML, возвращаемый с сервера. Или, что еще лучше, войдите в систему, отключите JavaScript и щелкните приложение. Страницы загружаются, даже если JavaScript отключен! 🤩

Это демонстрационное приложение работает на небольшой капле Digital Ocean, управляемой Laravel Forge.