inertia-defer-default

Defer heavy Inertia controller props until requested by the frontend.

Updated May 14, 2024
One-click install
npx skills add https://github.com/wagnerra23/oimpresso.com --skill inertia-defer-default
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: inertia-defer-default
Source: https://github.com/wagnerra23/oimpresso.com/tree/main/.claude/skills/inertia-defer-default
Command: npx skills add https://github.com/wagnerra23/oimpresso.com --skill inertia-defer-default

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents slow, unnecessary backend SQL work from running during Inertia partial reloads, which otherwise causes users to experience “full page loading” and degraded UX.

Core Features & Use Cases

  • Default defer for heavy props: Ensures controller props backed by expensive SQL, aggregates, eager-loads, service DB calls, or external HTTP are wrapped with Inertia::defer(fn () => ...).
  • Frontend-safe deferred rendering: Guides pages to use Inertia <Deferred> with skeleton fallbacks and to mark deferred props as optional (?:) to avoid blank screens from undefined access.
  • Exception handling and verification: Defines legitimate exceptions where defer should not be applied and provides a checklist to confirm the pattern is followed.

Quick Start

Ask the AI to update your Inertia controller and page so any heavy query props are wrapped with Inertia::defer and are rendered via <Deferred> with an appropriate skeleton fallback.

Frequently Asked Questions about inertia-defer-default

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I stop Inertia partial reloads from running heavy database queries?

To stop Inertia partial reloads from running heavy database queries, wrap expensive controller props like paginate, count, and eager-loaded aggregations with `Inertia::defer(fn () => ...)` so execution only happens when requested by the frontend.

Why does my Inertia page experience full page loading during partial reloads?

Inertia pages experience full page loading during partial reloads because unnecessary backend SQL work and external HTTP calls execute synchronously. Deferring heavy controller props prevents this degraded UX by delaying execution until the frontend actually requests the data.

How do I render deferred Inertia props in React without getting undefined errors?

To render deferred Inertia props in React without undefined errors, use the `@inertiajs/react` `<Deferred>` component with skeleton fallbacks and mark the deferred props as optional (`?:`) to safely handle runtime states when data is not yet available.

When should I not use Inertia defer for Laravel controller props?

You should not use Inertia defer for Laravel controller props when the data is immediately required for initial page render or falls under legitimate exceptions. Deferring critical data risks blank screens and breaks layout if frontend skeleton fallbacks are not properly configured.

What types of Laravel controller props should be wrapped with Inertia defer?

Laravel controller props derived from paginate, count, eager-loads, aggregations, subqueries, service database calls, and external HTTP requests should be wrapped with Inertia defer to reduce unnecessary backend work during partial reloads.