#[Defer]
Load components after the initial page render for faster page loads.
Basic Usage
Mark a component with #[Defer] to load it immediately after the page finishes rendering. This prevents heavy components from blocking the initial page load.
use LiVue\Attributes\Defer;
#[Defer]
class AnalyticsWidget extends Component
{
public int $visitors = 0;
public array $stats = [];
public function mount()
{
// Runs after page load, not blocking initial render
$this->visitors = Analytics::todayVisitors();
$this->stats = Analytics::getStats();
}
}Custom Placeholder
Show a loading state while the component loads.
#[Defer]
class RecentActivity extends Component
{
public function placeholder(): string
{
return '<div class="animate-pulse h-32 bg-gray-200 rounded"></div>';
}
// Or return a Blade view
public function placeholder(): string
{
return view('placeholders.activity-skeleton');
}
}#[Defer] vs #[Lazy]
Both defer loading, but with different triggers:
| Attribute | Loads When | Best For |
|---|---|---|
#[Defer] |
After page load (immediately) | Above-the-fold content that's heavy to render |
#[Lazy] |
When entering viewport | Below-the-fold content |
#[Lazy(onLoad: true)] |
After page load | Same as #[Defer] |
Use Cases
Dashboard Widgets
Analytics, charts, and stats that require heavy database queries.
Notifications
Load notification counts after the main UI is visible.
External API Data
Weather widgets, stock tickers, or any third-party data.
User-Specific Content
Personalized recommendations or user activity feeds.
How It Works
-
1
Placeholder rendered
Server renders a
<livue-lazy>wrapper with the placeholder content. -
2
Page finishes loading
The browser completes rendering the initial HTML.
-
3
Component loads via AJAX
Using
requestAnimationFrame, the component is fetched from the server. -
4
Placeholder replaced
The full component replaces the placeholder seamlessly.
Batching Multiple Deferred Components
Multiple deferred components on the same page are automatically batched into a single AJAX request.
<!-- Template with multiple deferred components -->
<div class="dashboard">
@livue('analytics-widget') <!-- #[Defer] -->
@livue('recent-activity') <!-- #[Defer] -->
@livue('notifications') <!-- #[Defer] -->
</div>
<!-- All three load in a single HTTP request -->