▶️ Дивитися відеоурок (5 хв)
Ваша панель у реальному часі працює: нові замовлення надходять, дані оновлюються. Але щоразу, коли Livewire повторно рендерить компонент, сторінка підстрибує вгору. Користувачі втрачають місце, анімації ламаються — інтерфейс виглядає недоробленим.
А що, якби дашборд оновлювався в реальному часі взагалі не торкаючись DOM?
У цьому випуску Laravel In Practice я покажу, як позбутися підстрибувань сторінки в Livewire-дашборді, поєднавши метод skipRender і Alpine.js. Ви навчитеся перехоплювати події в реальному часі перед перерендером Livewire, оновлювати статистику й таблицю замовлень безпосередньо через Alpine і додавати плавні анімації для нових замовлень.
Секрет у тому, що оновлення UI бере на себе Alpine.js, а Livewire стоїть осторонь. Замість повного перерендеру при кожному новому замовленні ми використовуємо skipRender, щоб зберегти стабільність сторінки, і встромляємо нові дані прямо в реактивний стан Alpine. Результат — дашборд, який відчувається нативним: без мерехтінь, без підстрибувань, лише плавні оновлення.
Це безпосереднє продовження real-time підвалин з Episode 17, де ми додали Reverb і Echo. Той епізод налагодив потік даних, а цей — робить роботу з ним приємною.