Компонент з повільним запитом (статистика, звіт, зовнішній API) затримує всю сторінку: сервер не відправить HTML, поки не виконає mount() кожного компонента.
Два способи відкласти:
<livewire:revenue-chart lazy /> {{-- коли стане видимим на екрані --}}
<livewire:revenue-chart defer /> {{-- одразу після завантаження сторінки --}}
lazy- компонент завантажується, коли потрапляє в область видимості (прокрутили до нього). Для блоків унизу сторінки, які можуть і не знадобитися;defer- завантажується одразу після першого показу сторінки, незалежно від прокрутки. Для того, що потрібно завжди, але не повинно затримувати першу відповідь.
Сторінка приходить швидко з заглушкою на місці компонента, а сам компонент підвантажується окремим запитом.
Заглушка (placeholder) - що бачить користувач, поки компонент вантажиться:
@placeholder
<div class="h-64 animate-pulse rounded bg-gray-100"></div>
@endplaceholder
<div>
Дохід цього місяця: {{ $amount }}
</div>
У класових компонентах - метод placeholder(). Кореневий тег заглушки й компонента має збігатися (<div> і <div>). Добра заглушка має той самий розмір, що й готовий блок, - інакше сторінка «стрибатиме».
Зробити відкладеним завжди - атрибути на класі #[Lazy] чи #[Defer]. Для цілої сторінки - Route::livewire(...)->lazy().
Об'єднання запитів. За замовчуванням кожен відкладений компонент вантажиться окремим паралельним запитом. Десять віджетів на дашборді - десять запитів. Можна об'єднати в один:
<livewire:revenue lazy.bundle />
Але тоді повільний віджет затримає швидкі - об'єднання доречне для схожих за швидкістю компонентів.
Що варто знати:
- параметри, передані відкладеному компоненту (
:user="$user"), серіалізуються й чекають у браузері до завантаження - тож моделі в них перезавантажуються з бази; - SEO: вміст відкладеного компонента відсутній у початковому HTML;
- у тестах -
Livewire::withoutLazyLoading(), щоб бачити справжній вміст, а не заглушку; - для частини компонента, а не цілого компонента, - острівець
@island(lazy: true).