Предзагрузка ссылки в Inertia

Давайте выясним, что такое предзагрузка страницы. Пока человек ещё читает текущий экран, клиент может в фоне запросить адрес, на который он, скорее всего, кликнет следующим. Когда переход наступит, ответ уже лежит в памяти и экран сменится быстрее.

У Link для этого служит атрибут prefetch. Без дополнительных значений Inertia начинает подгрузку, когда указатель задерживается на ссылке дольше короткого порога. Данные сохраняются в кэше клиента до истечения срока, который задаётся отдельно.

Давайте опишем список постов:

<?php
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts', function () {
		return Inertia::render('Posts/Index', [
			'title' => 'Posts',
			'items' => ['Alpha', 'Beta'],
		]);
	});
?>

Давайте включим предзагрузку на ссылку к этому списку:

<script setup>
	import { Link } from '@inertiajs/vue3'
</script>

<template>
	<h1>Home</h1>
	<Link href="/posts" prefetch>
		All posts
	</Link>
</template>

С главной панели работника Lars заранее подгружайте экран списка смен при наведении на пункт меню.