Ниже приведена подробная спецификация протокола Inertia. Сначала ознакомьтесь со страницей как это работает для получения общего представление.
Самый первый запрос к приложению Inertia - это обычный полнофункциональный запрос браузера без специальных заголовков или данных Inertia. Для этих запросов сервер возвращает полный HTML-документ.
Этот HTML-ответ включает ресурсы сайта (CSS, JavaScript), а также корневой элемент <div> в теле. Корневой элемент <div> служит точкой монтирования для клиентского приложения и включает атрибут data-page с закодированным в JSON объект страницы для начальной страницы. Inertia использует эту информацию для загрузки Вашей клиентской среды и отображения компонента начальной страницы.
<html>
<head>
<title>Мое приложение</title>
<link href="/css/app.css" rel="stylesheet">
<script src="/js/app.js" defer></script>
</head>
<body>
<div id="app" data-page='{"component":"Event","props":{"event":{"id":80,"title":"День рождения","start_date":"2019-06-02","description":"Выходите и отпразднуйте 36-летие Джонатана!"}},"url":"/events/80","version":"c32b8e4965f418ad16eaebba1d4e960f"}'></div>
</body>
</html>После загрузки приложения Inertia все последующие запросы к сайту выполняются через XHR со специальным заголовком X-Inertia, установленным в значение true. Этот заголовок указывает, что запрос выполняет Inertia, а не стандартным посещением полной страницы.
Когда сервер обнаруживает заголовок X-Inertia, вместо ответа полным HTML-документом он возвращает ответ JSON с закодированным объектом страницы.
{
"component": "Event",
"props": {
"event": {
"id": 80,
"title": "День рождения",
"start_date": "2019-06-02",
"description": "Выходите и отпразднуйте 36-летие Джонатана!"
}
},
"url": "/events/80",
"version": "c32b8e4965f418ad16eaebba1d4e960f"
}Inertia обменивается данными между сервером и клиентом через объект страницы. Этот объект включает в себя необходимую информацию, необходимую для визуализации компонента страницы, обновления состояния истории и отслеживания версии ресурса сайта. Объект страницы включает следующие четыре свойства:
При стандартных посещениях полной страницы объект страницы кодируется в формате JSON в атрибуте data-page в корневом каталоге <div>. При посещении Inertia объект страницы возвращается в качестве полезной нагрузки JSON.
Одна из распространенных проблем с одностраничными приложениями - обновление ресурсов сайта, когда они были изменены. Inertia упрощает это за счет необязательного отслеживания текущей версии актива сайта. В случае изменения актива Inertia автоматически выполнит жесткое (полное) посещение страницы вместо посещения XHR.
В объект страницы включен идентификатор версии version. Этот идентификатор версии устанавливается на стороне сервера и может быть числом, строкой, хешем файла и т. д. Это не имеет значения, если оно изменится при обновлении ресурсов сайта.
Всякий раз, когда делается запрос Inertia, она включает текущую версию актива в заголовок X-Inertia-Version. Когда сервер получает запрос, он сравнивает версию актива, представленную в заголовке X-Inertia-Version, с текущей версией актива. Обычно это обрабатывается в промежуточном программном обеспечении.
Если версии ресурсов совпадают, запрос просто продолжается, как и ожидалось. Однако, если они отличаются, сервер немедленно возвращает ответ 409 Conflict и включает URL-адрес в заголовок X-Inertia-Location. Этот заголовок необходим, поскольку могло произойти перенаправление на стороне сервера. Это сообщает Inertia окончательный целевой URL-адрес.
Обратите внимание, что ответы 409 Conflict отправляются только для запросов GET, но не для запросов POST/PUT/PATCH/DELETE. Тем не менее, они будут отправлены в том случае, если после одного из этих запросов произойдет GET перенаправление.
Наконец, если данные мгновенного сеанса существуют, когда возникает ответ 409 Conflict, сервер автоматически переформатирует эти данные.
При выполнении запросов Inertia опция частичной перезагрузки позволяет запрашивать подмножество свойств (данных) с сервера при последующих посещениях того же компонента страницы. Это может быть полезным для оптимизации производительности, если допустимо, чтобы некоторые данные страницы устарели.
Когда делается запрос частичной перезагрузки, Inertia включает два дополнительных заголовка с запросом: X-Inertia-Partial-Data и X-Inertia-Partial-Component.
Заголовок X-Inertia-Partial-Data представляет собой разделенный запятыми список желаемых ключей свйоств (данных), которые должны быть возвращены.
Заголовок X-Inertia-Partial-Component включает имя компонента, который частично перезагружается. Это необходимо, поскольку частичная перезагрузка работает только для запросов, сделанных к тому же компоненту страницы. Если конечный пункт назначения отличается по какой-либо причине (например, пользователь вышел из системы и теперь находится на странице входа), то частичной перезагрузки не произойдет.
{
"component": "Events",
"props": {
"auth": {...}, // Не включено
"categories": [...], // Не включено
"events": [...] // Включено
},
"url": "/events/80",
"version": "c32b8e4965f418ad16eaebba1d4e960f"
}