Product
├── id
├── name
├── sku
├── price        integer
├── image_path   nullable string
├── is_active    boolean
└── timestamps

React UI
  ↓ Inertia visit
Laravel route
  ↓
Validation / Controller
  ↓
Database
  ↓
Redirect / Inertia response
  ↓
Inertia reconcile page props
  ↓
React render state mới

GET /api/products
POST /api/products
PUT /api/products/1
DELETE /api/products/1

GET    /products
GET    /products/create
POST   /products
GET    /products/{product}/edit
PUT    /products/{product}
DELETE /products/{product}
PATCH  /products/{product}/toggle

URL/server owns:
- search
- status
- sort
- direction
- page

React local state owns:
- text đang gõ trước debounce
- modal/confirm state
- focus/hover

useForm owns:
- form data
- validation errors
- processing
- dirty/success state

Inertia page props owns:
- products
- filters đã canonicalize
- stats
- flash

examples/product-crud/
├── backend/
│   ├── create_products_table.php
│   ├── Product.php
│   ├── ProductController.php
│   ├── StoreProductRequest.php
│   ├── UpdateProductRequest.php
│   ├── HandleInertiaRequests.php
│   └── routes.php
└── frontend/
    ├── types/product.ts
    ├── components/ProductImageField.tsx
    ├── components/ProductForm.tsx
    └── pages/Products/
        ├── Index.tsx
        ├── Create.tsx
        └── Edit.tsx

User mở /products
    ↓
Laravel render Products/Index
    ├── products: closure → cần cho first paint
    ├── filters: canonical server state
    └── stats: deferred → không block page
    ↓
React render bảng ngay
    ↓
Deferred request lấy stats
    ↓
User nhập search
    ↓ 300 ms debounce
router.get(... only: ['products', 'filters'])
    ↓
Laravel chỉ evaluate props cần thiết
    ↓
Bảng update, UI state/scroll được giữ

User hover "Tạo" / "Sửa"
    ↓
prefetch page
    ↓
click
    ↓
page có thể lấy từ prefetch cache
    ↓
useForm keyed state
    ↓
submit
    ├── processing = true
    ├── server validation
    ├── errors nếu fail
    └── redirect + flash nếu success

click "Hoạt động"
    ↓
UI đổi trạng thái ngay
    ↓
PATCH /products/{id}/toggle
    ├── success → response server reconcile
    └── fail → Inertia rollback optimistic props