Що робить wire:navigate і чим він кращий за звичайне посилання?

wire:navigate на посиланні перетворює звичайний перехід на SPA-навігацію: сторінка завантажується через fetch, а браузер не перезавантажується.

<nav>
    <a href="/" wire:navigate>Головна</a>
    <a href="/jobs" wire:navigate>Вакансії</a>
    <a href="/posts" wire:navigate.hover>Блог</a>
</nav>

Що відбувається при кліку:

1. Livewire перехоплює клік і запитує нову сторінку звичайним GET-запитом;
2. замінює вміст <body> і оновлює <head> (заголовок, мета-теги);
3. змінює адресу через History API - кнопки «Назад» і «Вперед» працюють;
4. показує смугу прогресу вгорі сторінки.

Чому швидше: CSS і JavaScript не завантажуються й не виконуються заново, Alpine і Livewire не ініціалізуються з нуля. Сторінки відкриваються помітно швидше, і застосунок відчувається як SPA, хоча сервер віддає звичайний HTML.

Попереднє завантаження:

• за замовчуванням Livewire починає запит, щойно користувач натиснув кнопку миші, - до того, як він її відпустив;
• .hover - починати завантаження після 60 мс наведення чи фокусу на посиланні. Ще швидше для користувача, але сервер отримує запити на сторінки, які можуть і не знадобитися.

Корисні можливості:

• $this->redirect('/posts', navigate: true) - SPA-перехід після дії компонента;
• @persist('player') - елемент (аудіоплеєр, бічна панель) переживає перехід без перестворення;
• активне посилання - атрибут data-current на посиланні поточної сторінки чи директива wire:current="font-bold";
• анімація переходу - wire:transition.navigate через View Transitions API браузера.

Що варто знати:

• сервер віддає повну сторінку, як звичайно, - маршрути, middleware, SEO не змінюються. Без JavaScript посилання працюють як звичайні;
• JavaScript сторінок треба адаптувати: DOMContentLoaded спрацьовує лише на першому завантаженні - замість нього livewire:navigated;
• гостьові сторінки з кешуванням на CDN працюють з wire:navigate, але залежать від того, що віддає кеш - варто перевірити, що кешований HTML не містить персональних даних.

Докладніше в документації: Навігація