Атрибут `Isolate`⚓︎

Атрибут #[Isolate] предотвращает объединение (группировку) запросов компонента с обновлениями других компонентов, позволяя ему выполняться параллельно.

Почему группировка важна⚓︎

Каждое обновление компонента в Livewire инициирует сетевой запрос. По умолчанию, когда несколько компонентов инициируют обновления одновременно, они объединяются в один запрос.

Это приводит к меньшему количеству сетевых подключений к серверу и может значительно снизить нагрузку на сервер. Помимо повышения производительности, это также открывает внутренние возможности, требующие взаимодействия между несколькими компонентами (Реактивные свойства, Связывание данных с помощью wire:model и т. д.).

Однако иногда желательно отключить эту группировку по соображениям производительности. Именно здесь на помощь приходит #[Isolate].

Базовое использование⚓︎

Примените атрибут #[Isolate] к любому компоненту, который должен отправлять изолированные запросы:

resources/views/components/post/⚡show.blade.php

<?php

use Livewire\Attributes\Isolate;
use Livewire\Component;
use App\Models\Post;

new #[Isolate] class extends Component {
    public Post $post;

    public function refreshStats()
    {
        // Ресурсозатратная операция...
        $this->post->recalculateStatistics();
    }
};

С #[Isolate] запросы этого компонента больше не будут объединяться с обновлениями других компонентов, что позволит им выполняться параллельно.

Когда группировка помогает, а когда мешает

Группировка хороша для большинства сценариев, но если компонент выполняет ресурсозатратные операции, группировка может замедлить весь запрос. Изоляция такого компонента позволяет ему выполняться параллельно с другими обновлениями.

Когда использовать⚓︎

Используйте #[Isolate], когда:

Компонент выполняет ресурсозатратные операции (сложные запросы, вызовы API, тяжелые вычисления).
Несколько компонентов используют wire:poll, и вы хотите иметь независимые интервалы опроса.
Компоненты прослушивают события, и вы не хотите, чтобы один медленный компонент блокировал остальные.
Компоненту не нужно координировать свои действия с другими компонентами на странице.

Пример: Опрос компонентов⚓︎

Вот практический пример с несколькими опрашиваемыми компонентами:

resources/views/components/⚡system-status.blade.php

<?php

use Livewire\Attributes\Isolate;
use Livewire\Component;

new #[Isolate] class extends Component {
    public function checkStatus()
    {
        // Медленный вызов внешнего API...
        return ExternalService::getStatus();
    }
};

<div wire:poll.5s>
    Статус: {{ $this->checkStatus() }}
</div>

Без #[Isolate] медленный вызов API в этом компоненте задерживал бы другие компоненты на странице. С ним компонент выполняет опрос независимо, не блокируя остальные.

Ленивые компоненты изолированы по умолчанию⚓︎

При использовании атрибута #[Lazy] компоненты автоматически изолируются для параллельной загрузки. При необходимости вы можете отключить это поведение:

resources/views/components/⚡revenue.blade.php

<?php

use Livewire\Attributes\Lazy;
use Livewire\Component;

new #[Lazy(isolate: false)] class extends Component {
    // ...
};

Теперь несколько компонентов revenue будут объединять свои запросы ленивой загрузки в один сетевой запрос.

Плюсы и минусы⚓︎

Преимущества:

Предотвращает блокировку обновлений других компонентов медленными компонентами.
Обеспечивает истинно параллельное выполнение ресурсозатратных операций.
Независимый опрос и обработка событий.

Недостатки:

Больше сетевых запросов к серверу.
Невозможность координации с другими компонентами в рамках одного запроса.
Немного более высокие накладные расходы на сервере из-за нескольких подключений.

Атрибут Isolate⚓︎