Отложенный пропс в Inertia

Давайте познакомимся с методом defer на стороне Laravel. Он оборачивает замыкание с данными пропса: первый ответ рисует страницу без этого поля, а Inertia сразу после отправляет отдельный запрос и подставляет значение, когда оно готово.

Так ускоряют первый кадр, если выборка тяжёлая, а остальные пропсы нужны сразу. На Vue пропс объявляют как обычно и показывают блок условием, пока массив ещё не пришёл.

Давайте отдадим пользователей сразу, а права отложим:

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

	Route::get('/users', function () {
		return Inertia::render('Users/Index', [
			'users' => ['Anna', 'Boris'],
			'permissions' => Inertia::defer(
				fn () => ['edit', 'publish'],
			),
		]);
	});
?>

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

<script setup>
	defineProps({
		users: Array,
		permissions: Array,
	})
</script>

<template>
	<ul>
		<li v-for="user in users" :key="user">
			{{ user }}
		</li>
	</ul>
	<ul v-if="permissions">
		<li
			v-for="permission in permissions"
			:key="permission"
		>
			{{ permission }}
		</li>
	</ul>
</template>

Сделайте страницу работников с пропсом roles, который приходит после первого экрана, и выведите роли списком, когда они появятся.