Перейти к содержанию

Атрибут Defer⚓︎

Атрибут #[Defer] заставляет компонент загружаться сразу после завершения начальной загрузки страницы, предотвращая блокировку рендеринга страницы медленными компонентами.

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

Примените атрибут #[Defer] к любому компоненту, загрузку которого нужно отложить:

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

use Livewire\Attributes\Defer;
use Livewire\Component;
use App\Models\Transaction;

new #[Defer] class extends Component {
    public $amount;

    public function mount()
    {
        // Медленный запрос к базе данных...
        $this->amount = Transaction::monthToDate()->sum('amount');
    }
};
?>

<div>
    Доход за этот месяц: {{ $amount }}
</div>

С #[Defer] компонент изначально рендерится как пустой <div></div>, а затем загружается сразу после того, как страница закончит загрузку — не дожидаясь, пока он попадет в область видимости.

Сравнение Lazy и Defer⚓︎

Livewire предоставляет два способа отложенной загрузки компонентов:

  • Ленивая загрузка (#[Lazy]) — компоненты загружаются, когда они становятся видимыми в области просмотра (когда пользователь прокручивает страницу до них).
  • Отложенная загрузка (#[Defer]) — компоненты загружаются сразу после завершения начальной загрузки страницы.

Оба способа предотвращают блокировку начального рендеринга страницы медленными компонентами, но различаются моментом фактической загрузки компонента.

Рендеринг заглушек⚓︎

По умолчанию Livewire рендерит пустой <div></div> до загрузки компонента. Вы можете предоставить пользовательскую заглушку, используя метод placeholder():

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

use Livewire\Attributes\Defer;
use Livewire\Component;
use App\Models\Transaction;

new #[Defer] class extends Component {
    public $amount;

    public function mount()
    {
        $this->amount = Transaction::monthToDate()->sum('amount');
    }

    public function placeholder()
    {
        return <<<'HTML'
        <div>
            <svg><!-- Спиннер загрузки... --></svg>
        </div>
        HTML;
    }
};
?>

<div>
    Доход за этот месяц: {{ $amount }}
</div>

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

Соответствие типа корневого элемента заглушки

Если корневым элементом вашей заглушки является <div>, ваш компонент также должен использовать элемент <div>.

Группировка запросов⚓︎

По умолчанию отложенные компоненты загружаются параллельно независимыми сетевыми запросами. Чтобы объединить несколько отложенных компонентов в один запрос, используйте параметр bundle:

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

use Livewire\Attributes\Defer;
use Livewire\Component;

new #[Defer(bundle: true)] class extends Component {
    // ...
};

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

Альтернативный подход⚓︎

Использование параметра defer⚓︎

Вместо атрибута вы можете отложить загрузку конкретных экземпляров компонентов с помощью параметра defer:

<livewire:revenue defer />

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

Переопределение атрибута⚓︎

Если у компонента есть атрибут #[Defer], но вы хотите загрузить его немедленно в определённых случаях, вы можете переопределить его:

<livewire:revenue :defer="false" />

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

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

  • Компоненты содержат медленные операции (запросы к базе данных, вызовы API), которые задержали бы загрузку страницы.
  • Компонент всегда виден при начальной загрузке страницы (если он находится ниже «линии сгиба», используйте вместо этого #[Lazy]).
  • Вы хотите улучшить воспринимаемую производительность, быстрее показывая страницу.

Узнать больше⚓︎

Для получения полной документации по ленивой и отложенной загрузке, включая заглушки и стратегии группировки, см. документацию по ленивой загрузке.

Справочник⚓︎

<?php

#[Defer(
    bool|null $bundle = null,
)]
Параметр Тип По умолчанию Описание
$bundle bool\|null null Группировать несколько отложенных компонентов в один сетевой запрос