リクエストの結合
Livewireの各コンポーネントの更新は、ネットワークリクエストをトリガーします。デフォルトでは、複数のコンポーネントが同時に更新をトリガーする場合、それらは単一のリクエストにまとめられます。Every component update in Livewire triggers a network request. By default, when multiple components trigger updates at the same time, they are bundled into a single request.
これにより、サーバへのネットワーク接続が減り、サーバの負荷を大幅に軽減できます。This results in fewer network connections to the server and can drastically reduce server load.
パフォーマンスの向上に加えて、これは複数のコンポーネント間の連携を必要とする機能を内部的に解放します（Reactive Properties、Modelable Propertiesなど）。In addition to the performance gains, this also unlocks features internally that require collaboration between multiple components (Reactive Properties[/docs/nesting#reactive-props], Modelable Properties[/docs/nesting#binding-to-child-data-using-wiremodel], etc.)
ただし、パフォーマンス上の理由から、このバンドルを無効にすることが望ましい場合があります。次のページでは、Livewireでこの動作をカスタマイズするためのさまざまな方法について概説します。However, there are times when disabling this bundling is desired for performance reasons. The following page outlines various ways to customize this behavior in Livewire.
コンポーネントリクエストの分離Isolating component requests
Livewireの#[Isolate]クラス属性を使用すると、コンポーネントを「分離」としてマークできます。これは、そのコンポーネントがサーバへのラウンドトリップを行うたびに、他のコンポーネントリクエストから自身を分離しようとすることを意味します。By using Livewire's #[Isolate] class attribute, you can mark a component as "isolated". This means that whenever that component makes a server roundtrip, it will attempt to isolate itself from other component requests.
これは、更新が高価であり、他のコンポーネントと並行してこのコンポーネントの更新を実行したい場合に役立ちます。たとえば、複数のコンポーネントがwire:pollを使用している場合や、ページ上のイベントをリッスンしている場合、更新が高価で、リクエスト全体を保留してしまう可能性のある特定のコンポーネントを分離することができます。This is useful if the update is expensive and you'd rather execute this component's update in parallel with others. For example, if multiple components are using wire:poll or listening for an event on the page, you may want to isolate specific component whose updates are expensive and would otherwise hold up the entire request.
use Livewire\Attributes\Isolate;
use Livewire\Component;
#[Isolate] // [tl! highlight]
class ShowPost extends Component
{
// ...
}
#[Isolate]属性を追加すると、このコンポーネントのリクエストは他のコンポーネントの更新とバンドルされなくなります。By adding the #[Isolate] attribute, this component's requests will no longer be bundled with other component updates.
遅延コンポーネントはデフォルトで分離されるLazy components are isolated by default
単一のページ上の多くのコンポーネントが「遅延」ロードされている（#[Lazy]属性を使用）場合、それらのリクエストが分離され、並行して送信されることが望ましいことがよくあります。したがって、Livewireはデフォルトで遅延更新を分離します。When many components on a single page are "lazy" loaded (using the #[Lazy] attribute), it is often desired that their requests are isolated and sent in parallel. Therefore, Livewire isolates lazy updates by default.
この動作を無効にする場合は、次のようにisolate: falseパラメーターを#[Lazy]属性に渡すことができます。If you wish to disable this behavior, you can pass an isolate: false parameter into the #[Lazy] attribute like so:
<?php
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\Lazy;
#[Lazy(isolate: false)] // [tl! highlight]
class Revenue extends Component
{
// ...
}
これで、同じページに複数のRevenueコンポーネントがある場合、10個すべての更新がバンドルされ、単一の遅延ロードネットワークリクエストとしてサーバに送信されます。Now, if there are multiple Revenue components on the same page, all ten updates will be bundled and sent the server as single, lazy-load, network request.