Необязательный пропс в Inertia

Пусть на экране списка постов уже есть заголовок и сами записи, а сводка по числу просмотров считается долго и для первого захода не нужна.

Метод optional у Inertia оборачивает замыкание с данными и не кладёт пропс в обычный ответ. Пока клиент не попросит это поле отдельно, сервер его не считает и не отправляет. На Vue пропс можно не объявлять как обязательный и показывать блок только когда значение уже пришло.

Давайте отдадим посты сразу, а сводку обернём в optional:

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

	Route::get('/posts', function () {
		return Inertia::render('Posts/Index', [
			'title' => 'News',
			'posts' => ['Alpha', 'Beta'],
			'summary' => Inertia::optional(fn () => [
				'views' => 1200,
				'comments' => 48,
			]),
		]);
	});
?>

Давайте добавим кнопку, которая запрашивает у сервера только пропс summary через метод reload у router:

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

	defineProps({
		title: String,
		posts: Array,
		summary: Object,
	})

	function loadSummary() {
		router.reload({ only: ['summary'] })
	}
</script>

<template>
	<h1>{{ title }}</h1>
	<ul>
		<li v-for="post in posts" :key="post">
			{{ post }}
		</li>
	</ul>
	<button type="button" @click="loadSummary">
		Load summary
	</button>
	<p v-if="summary">
		Views: {{ summary.views }},
		comments: {{ summary.comments }}
	</p>
</template>

Сделайте список работников с именами Nina и Victor, чтобы блок attendance появлялся только после нажатия кнопки и не был в первом ответе сервера.