The @island Directive: Partial Hydration in Livewire v4

Segment expensive parts of views for better performance.

The @island directive enables partial hydration for slow components.

Usage

blade

<div>
    <h1>Dashboard</h1>
    <p>Welcome back!</p>
    
    @island
        <livewire:expensive-chart />
    @endisland
</div>

blade

@island
    <livewire:analytics />
@loading
    <div class="skeleton">Loading...</div>
@endisland

Segment expensive parts of views for better performance.

The @island directive enables partial hydration for slow components.

blade

<div>
    <h1>Dashboard</h1>
    <p>Welcome back!</p>
    
    @island
        <livewire:expensive-chart />
    @endisland
</div>

blade

@island
    <livewire:analytics />
@loading
    <div class="skeleton">Loading...</div>
@endisland