Páginas e props

Cada página do site é um arquivo .jsx ou .tsx em react/pages do tema. Página de plugin fica em app/modules/{plugin}/views/react. O primeiro argumento de inertia() é o caminho desse arquivo, sem extensão. No plugin ele segue o nome da view: market.item.index.

Pasta

themes/delta/react/
├── app.css
├── layouts/
│   └── Public.jsx
├── pages/
│   ├── Home.tsx
│   └── Account/
│       └── Panel.tsx
└── modules/
    └── shop/
        └── show.tsx

app/modules/shop/views/react/show.tsx

return $this->inertia('Welcome');
return $this->inertia('Account/Profile', [
    'character' => $character,
]);

app/engine/inertia/app.jsx resolve a página do tema em react/pages. Se o nome começa pelo plugin, procura primeiro react/modules/{plugin}/ no tema, sem a pasta views, e depois app/modules/{plugin}/views/react. O nome não pode conter ...

Props da página

import { Head, usePage } from '@inertiajs/react'

export default function Welcome({ server }) {
    const { auth, app } = usePage().props

    return (
        <>
            <Head title="Inertia" />
            <p>{app.name}</p>
            <p>{auth.user ? auth.user.name : 'visitante'}</p>
            <p>{server.name}</p>
        </>
    )
}

O que você passa no handler chega como argumento do componente. O que a Engine compartilha chega em usePage().props.

Prop	Conteúdo
`errors`	Erros da validação. Vai em todo partial reload.
`flash`	`type` e `message` de `request()->message()`.
`old`	Campos da tentativa anterior. `route`, `_token` e `_method` são removidos.
`auth.*`	`user` sempre. Outros guards entram sozinhos quando a sessão tem `{guard}_id` (ex.: depois de `auth::login($model, 'game_master')`). Cada um é `{ id, name }` ou `null`. Middleware não registra nada.
`csrf_token`	Token da sessão. O cookie `XSRF-TOKEN` já cobre o cliente.
`app`	`name` e `url` base do site.

Props sob demanda

return $this->inertia('Dashboard', [
    'online' => $players,
    'ranking' => inertia_defer(fn () => $this->ranking()),
    'audit' => inertia_lazy(fn () => $this->audit()),
    'feed' => inertia_merge(fn () => $messages),
]);

inertia_lazy() só entra quando o cliente pede a chave num partial reload.
inertia_defer() sai da primeira resposta e o cliente busca em seguida. O grupo padrão é default.
inertia_merge() manda o cliente concatenar a lista em vez de substituir.
inertia_always() entra mesmo no partial reload. errors já é assim.

Para compartilhar um valor em toda página React: inertia(['server_time' => fn () => time()]).

💡Partial reload

O cliente pode pedir só algumas props com X-Inertia-Partial-Component e X-Inertia-Partial-Data. A resposta traz essas chaves e as marcadas como always.