Laravel controller
  -> JSON API
  -> axios service
  -> React Query/global store
  -> client router
  -> duplicated validation/auth rules

// routes/web.php
Route::get('/products', [ProductController::class, 'index'])->name('products.index');
Route::post('/products', [ProductController::class, 'store'])->name('products.store');

public function index(Request $request)
{
    return Inertia::render('Products/Index', [
        'products' => Product::query()->latest()->paginate(20),
    ]);
}

public function store(StoreProductRequest $request)
{
    Product::create($request->validated());

    return to_route('products.index')
        ->with('success', 'Đã tạo sản phẩm.');
}

const form = useForm({ name: '', sku: '' })

form.post(route('products.store'))

// Sai nếu local list không có lifecycle riêng.
const [products, setProducts] = useState(props.products)

export default function Index({ products }: Props) {
    return products.data.map((product) => (
        <ProductRow key={product.id} product={product} />
    ))
}

input keystroke
  -> local draft
  -> debounce
  -> URL query
  -> Laravel query
  -> page props

const { filters } = usePage<PageProps>().props
const [search, setSearch] = useState(filters.search ?? '')

useEffect(() => {
    const timer = window.setTimeout(() => {
        router.get(
            route('products.index'),
            { ...filters, search: search || undefined, page: undefined },
            {
                only: ['products', 'filters'],
                preserveState: true,
                preserveScroll: true,
                replace: true,
            },
        )
    }, 300)

    return () => window.clearTimeout(timer)
}, [search])

router.reload({
    only: ['products'],
    preserveScroll: true,
})

return Inertia::render('Products/Index', [
    'products' => fn () => $this->queryProducts($request),
    'categories' => fn () => Category::orderBy('name')->get(['id', 'name']),
    'stats' => Inertia::defer(fn () => $this->buildStats()),
]);

public function share(Request $request): array
{
    return [
        ...parent::share($request),
        'auth' => [
            'user' => fn () => $request->user()?->only('id', 'name'),
        ],
        'flash' => [
            'success' => fn () => $request->session()->get('success'),
        ],
    ];
}

'auth' => [
    'user' => $request->user(),
    'allPermissions' => Permission::all(),
    'notifications' => Notification::latest()->limit(100)->get(),
    'settings' => Setting::all(),
]

const form = useForm('CreateProduct', {
    name: '',
    sku: '',
    price: '',
})

function submit(event: FormEvent) {
    event.preventDefault()

    form.post(route('products.store'), {
        preserveScroll: 'errors',
        onSuccess: () => form.reset(),
    })
}

<button disabled={form.processing}>
    {form.processing ? 'Đang lưu…' : 'Lưu'}
</button>

{form.errors.name && (
    <p role="alert">{form.errors.name}</p>
)}

const form = useForm(`EditProduct:${product.id}`, {
    name: product.name,
    sku: product.sku,
})

router.post(route('companies.store'), company, {
    errorBag: 'createCompany',
})

router.post(route('users.store'), user, {
    errorBag: 'createUser',
})

// Không phải mental model mặc định của Inertia form.
try {
    await axios.post('/products', data)
} catch (error) {
    if (error.response?.status === 422) { /* map errors */ }
}

POST
 -> Laravel validation fail
 -> redirect back + session errors
 -> Inertia props.errors
 -> onError(errors)
 -> component state được preserve

form.post(route('products.store'), {
    onError: (errors) => {
        if (errors.name) nameRef.current?.focus()
    },
})

Navigation      -> global progress
Submit          -> form.processing
Upload          -> form.progress
Deferred panel  -> skeleton/fallback riêng
Polling widget  -> subtle refreshing state
Optimistic      -> immediate UI + rollback feedback

{form.progress && (
    <progress max="100" value={form.progress.percentage}>
        {form.progress.percentage}%
    </progress>
)}

router.get(url, data, {
    preserveState: true,
    preserveScroll: true,
})

Cùng screen + thay dữ liệu query -> thường preserve
Sang screen/entity semantics khác -> thường reset
Validation fail -> preserve form
Mutation thành công -> tùy UX, đừng giữ stale local state

<div
    scroll-region=""
    className="h-[calc(100vh-64px)] overflow-y-auto"
>
    {children}
</div>

<Link
    href={route('products.edit', product.id)}
    prefetch
    cacheFor="30s"
>
    Sửa
</Link>

- request có tốn nhiều thời gian xử lý, truy vấn database hoặc tài nguyên máy chủ không?
- user có khả năng click cao không?
- response có dữ liệu nhạy cảm cần cân nhắc cache không?
- cache TTL có phù hợp freshness requirement không?
- hover prefetch có tạo wasted traffic lớn không?

return Inertia::render('Products/Index', [
    'products' => ProductResource::collection($products),
    'stats' => Inertia::defer(
        fn () => $this->expensiveStats(),
        'analytics',
    ),
]);

<Deferred data="stats" fallback={<StatsSkeleton />}>
    <ProductStats />
</Deferred>

router.patch(
    route('products.toggle', product.id),
    {},
    {
        preserveScroll: true,
        optimistic: {
            props: (current) => ({
                products: updateProductStatus(current.products, product.id),
            }),
        },
        onSuccess: () => {
            router.reload({ only: ['stats'] })
        },
    },
)

optimistic local perception
 -> server mutation
 -> reconcile canonical server state

const [isFiltering, setIsFiltering] = useState(false)

router.get(url, params, {
    only: ['products'],
    preserveState: true,
    replace: true,
    onStart: () => setIsFiltering(true),
    onFinish: () => setIsFiltering(false),
})

const search = useHttp({ query: '' })

function lookup() {
    search.get('/api/product-suggestions')
}

Kết quả request thay đổi page props/navigation? -> router / form visit
Chỉ cần JSON độc lập, không muốn page lifecycle? -> useHttp

return to_route('products.index')
    ->with('success', 'Sản phẩm đã được cập nhật.');

const { flash } = usePage<PageProps>().props

{flash.success && <Toast>{flash.success}</Toast>}

return Inertia::location($checkoutUrl);

useEffect(() => {
    const removeStart = router.on('start', (event) => {
        performance.mark('inertia:start')
    })

    const removeFinish = router.on('finish', (event) => {
        performance.mark('inertia:finish')
        performance.measure(
            'inertia:visit',
            'inertia:start',
            'inertia:finish',
        )
    })

    return () => {
        removeStart()
        removeFinish()
    }
}, [])

->withExceptions(function (Exceptions $exceptions) {
    $exceptions->respond(function ($response, $exception, $request) {
        if (app()->environment(['local', 'testing'])) {
            return $response;
        }

        if (in_array($response->getStatusCode(), [403, 404, 500, 503], true)) {
            return Inertia::render('Error', [
                'status' => $response->getStatusCode(),
            ])->toResponse($request)
              ->setStatusCode($response->getStatusCode());
        }

        return $response;
    });
})

Không tự hack retry vô hạn khi thấy 409.
Kiểm tra asset version + X-Inertia-Location + deploy cache/CDN.

{can.updateProduct && (
    <Link href={route('products.edit', product.id)}>Sửa</Link>
)}

public function update(UpdateProductRequest $request, Product $product)
{
    $this->authorize('update', $product);

    // ...
}

'products' => ProductResource::collection($products),

export type ProductListItem = {
    id: number
    name: string
    sku: string
    formatted_price: string
    can: {
        update: boolean
        delete: boolean
    }
}

$products = Product::query()
    ->with('category:id,name')
    ->paginate(20);

return Inertia::render('Dashboard', [
    'summary' => fn () => $summaryService->build(),
    'recentOrders' => fn () => $orderService->recent(),
    'heavyChart' => Inertia::defer(fn () => $chartService->build()),
]);

router.reload({ only: ['heavyChart'] })

1. DOM event có fire không?
2. URL/method/data của Inertia visit đúng không?
3. preserve/only/except/replace có đúng semantics không?
4. Laravel route đúng không?
5. middleware/policy/validation có chặn không?
6. query có đúng và đủ eager-load không?
7. controller trả props nào?
8. có redirect không, redirect đi đâu?
9. response có X-Inertia và component đúng không?
10. React nhận prop mới nhưng local mirror state có che nó không?
11. request cũ/new có race không?
12. aggregate/cache/deferred prop đã reconcile chưa?

[ ] URL có phản ánh state cần share/bookmark không?
[ ] Server vẫn là source of truth cho business state?
[ ] Shared props có nhỏ không?
[ ] Partial reload có lazy server evaluation không?
[ ] Loading/error/success có đúng scope không?
[ ] Mutation có redirect/reconcile rõ không?
[ ] Authorization có enforce ở server không?
[ ] Back/Forward có behavior hợp lý không?
[ ] Scroll/focus có bị reset ngoài ý muốn không?
[ ] Query count/payload size có đo không?
[ ] Failure 403/404/419/422-like validation/500/network có UX không?
[ ] Test có cover happy path + validation + permission + stale/race case quan trọng không?

<Form
    action={route('products.image', product.id)}
    method="post"
    cancelOnUnmount
>
    <input type="file" name="image" />
    <button type="submit">Upload</button>
</Form>

const form = useForm({
    name: '',
    sku: '',
}).withPrecognition('post', route('products.store'))

<input
    value={form.data.sku}
    onChange={(event) => form.setData('sku', event.target.value)}
    onBlur={() => form.validate('sku')}
/>

{form.validating && <span>Đang kiểm tra…</span>}
{form.invalid('sku') && <p>{form.errors.sku}</p>}

const offHttp = router.on('httpException', (event) => {
    console.error('Invalid/non-Inertia response', event.detail.response)
})

const offNetwork = router.on('networkError', (event) => {
    console.error('Network failure', event.detail.error)
})

server trả HTML/JSON sai protocol -> httpException
mạng đứt / resolve component fail -> networkError
validation Inertia bình thường      -> không phải hai loại trên

<Link
    href={route('products.show', product.id)}
    prefetch
    cacheFor={['20s', '1m']}
>
    Xem sản phẩm
</Link>

<Form
    action={route('products.update', product.id)}
    method="put"
    invalidateCacheTags={['products', `product:${product.id}`]}
>
    {/* fields */}
</Form>

mutation thay đổi canonical state
 -> cache nào chứa projection của state đó?
 -> invalidate/reload/reconcile bằng cơ chế phù hợp

const form = useForm({
    sku: '',
}).withAllErrors()