Как это устроено

С Inertia Вы создаете приложения точно так же, как Вы всегда это делали с выбранным Вами серверным веб-фреймворком. Вы используете существующие функции своей платформы для маршрутизации, контроллеров, промежуточного программного обеспечения, аутентификации, авторизации, выборки данных и многого другого.

Единственное, что отличается, - это Ваша прослойка просмотра. Вместо использования рендеринга на стороне сервера (например, Blade или шаблонов ERB) представления являются компонентами страницы JavaScript. Это позволяет Вам создавать весь интерфейс с помощью React, Vue или Svelte.

Но простое создание интерфейса на JavaScript не дает Вам возможности работать с одностраничным приложением. Если бы Вы щелкнули ссылку, Ваш браузер совершил бы полное посещение страницы, что привело бы к перезагрузке клиентской среды при последующей загрузке страницы. Вот тут и появляется Inertia.

В своей основе Inertia по существу является клиентской библиотекой маршрутизации. Это позволяет Вам посещать страницу без принудительной перезагрузки страницы. Это делается с помощью компонента <inertia-link>, легкой оболочки вокруг обычной якорной ссылки. Когда Вы нажимаете ссылку Inertia, она перехватывает клик и вместо этого совершает визит через XHR. Стоит отметить, что Вы также можете выполнять эти посещения программно в JavaScript, используя Inertia.visit().

Когда Inertia совершает посещение XHR, сервер обнаруживает, что это посещение Inertia, и вместо того, чтобы возвращать полный HTML-ответ, он возвращает JSON-ответ с именем и данными (свойствами) компонента страницы JavaScript. Затем Inertia динамически заменяет предыдущий компонент страницы новым компонентом страницы и обновляет состояние истории.

Конечный результат - гладкий одностраничный опыт. 🎉

Дополнительные сведения о том, как это делается технически, см. на странице Протокол.