Product CRUD: Index Frontend chuyên sâu

Đây là page thể hiện nhiều sức mạnh Inertia nhất trong sample.

Types

resources/js/types/product.ts

export type Product = {
  id: number
  name: string
  sku: string
  price: number
  is_active: boolean
  created_at?: string
}

export type ProductFilters = {
  search: string
  status: 'all' | 'active' | 'inactive'
  sort: 'name' | 'price' | 'created_at'
  direction: 'asc' | 'desc'
}

export type Paginated<T> = {
  data: T[]
  current_page: number
  last_page: number
  total: number
  links: { url: string | null; label: string; active: boolean }[]
}

Search: local typing state, server owns canonical filter

Đây là chỗ nhiều app làm sai. Nếu mỗi ký tự gọi request ngay thì request density quá cao; nếu chỉ giữ search local thì URL không share/bookmark được. Giải pháp:

const [search, setSearch] = useState(filters.search)

useEffect(() => {
  const timeout = window.setTimeout(() => {
    if (search === filters.search) return

    router.get('/products', { ...filters, search, page: 1 }, {
      only: ['products', 'filters'],
      preserveState: true,
      preserveScroll: true,
      replace: true,
    })
  }, 300)

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

Ý nghĩa từng option:

only: không request lại prop không liên quan như stats.
preserveState: input đang focus và local interaction không bị reset.
preserveScroll: bảng không nhảy lên đầu trang.
replace: gõ i → ip → iph → iphone không tạo bốn history entry.
page: 1: filter mới luôn quay về page hợp lệ.

preserveState không có nghĩa filter nên nằm local. URL/server vẫn là source of truth; local search chỉ là buffer trong khoảng debounce.

Filter/sort dùng cùng một visit function

function changeFilter(patch: Partial<ProductFilters>) {
  router.get('/products', { ...filters, ...patch, page: 1 }, {
    only: ['products', 'filters'],
    preserveState: true,
    preserveScroll: true,
    replace: true,
  })
}

Điều này giữ contract nhất quán giữa search/status/sort.

Deferred stats

Backend:

'stats' => Inertia::defer(fn () => [
    'total' => Product::count(),
    'active' => Product::where('is_active', true)->count(),
    'inactive' => Product::where('is_active', false)->count(),
], rescue: true),

React:

<Deferred
  data="stats"
  fallback={<div className="h-20 animate-pulse rounded-md bg-neutral-100" />}
  rescue={({ reloading }) => (
    <div>
      Không tải được thống kê.
      <button
        disabled={reloading}
        onClick={() => router.reload({ only: ['stats'] })}
      >
        Thử lại
      </button>
    </div>
  )}
>
  {stats && (
    <section className="grid grid-cols-3 gap-3">
      <Stat label="Tổng" value={stats.total} />
      <Stat label="Hoạt động" value={stats.active} />
      <Stat label="Tạm ẩn" value={stats.inactive} />
    </section>
  )}
</Deferred>

Mental model:

critical data        non-critical data
products             stats
filters              ↓
↓                    deferred request
first render         ↓
interactive UI       fill stats later

Deferred không phải “lazy load mọi thứ”. Nếu dữ liệu quyết định layout chính hoặc quyền truy cập, đừng defer tùy tiện.

Prefetch create/edit

<Link href="/products/create" prefetch cacheFor="1m">
  Tạo sản phẩm
</Link>

<Link
  href={`/products/${product.id}/edit`}
  prefetch
  cacheFor="30s"
>
  Sửa
</Link>

Prefetch phù hợp vì hover vào nút edit/create có xác suất cao dẫn tới click thật. Không nên prefetch hàng trăm row ngay khi mount.

Optimistic toggle

Toggle active/inactive là use case optimistic tốt vì:

thay đổi nhỏ;
deterministic;
dễ rollback;
user mong phản hồi tức thì.

function toggle(product: Product) {
  router
    .optimistic((pageProps) => {
      const current = pageProps.products as Paginated<Product>

      const currentStats = pageProps.stats as ProductStats | undefined
      const delta = product.is_active ? -1 : 1

      return {
        products: {
          ...current,
          data: current.data.map((item) =>
            item.id === product.id
              ? { ...item, is_active: !item.is_active }
              : item,
          ),
        },
        ...(currentStats
          ? {
              stats: {
                ...currentStats,
                active: currentStats.active + delta,
                inactive: currentStats.inactive - delta,
              },
            }
          : {}),
      }
    })
    .patch(`/products/${product.id}/toggle`, {}, {
      preserveScroll: true,
      only: ['products'],
      onSuccess: () => router.reload({ only: ['stats'] }),
    })
}

Runtime:

T0 click
T1 UI đổi ngay
T2 request PATCH bắt đầu
T3a success → server response reconcile → partial reload `stats`
T3b validation/server error → rollback snapshot

Đừng optimistic một thao tác mà user không thể hiểu trạng thái rollback, ví dụ payment hoặc mutation nhiều aggregate.

Delete: cố tình không optimistic

function destroy(product: Product) {
  if (!window.confirm(`Xóa “${product.name}”?`)) return

  router.delete(`/products/${product.id}`, {
    preserveScroll: true,
    only: ['products'],
  })
}

Lý do: delete có tính phá hủy. Feedback hơi chậm nhưng predictable thường tốt hơn “biến mất rồi xuất hiện lại” khi server reject.

Pagination vẫn là Inertia navigation

<Link
  href={link.url}
  only={['products', 'filters']}
  preserveScroll
  preserveState
>
  ...
</Link>

withQueryString() phía Laravel giữ filter trong pagination URL, nên reload/share URL vẫn đúng.

Full Index source

File hoàn chỉnh nằm tại:

examples/product-crud/frontend/pages/Products/Index.tsx

Nên đọc source đó sau khi hiểu từng khối trên. Giá trị của sample nằm ở cách các capability phối hợp, không phải ở một option riêng lẻ.

Tài liệu chính thức

Nội dung thực chiến trong bài được xây dựng dựa trên API và nguyên lý của Inertia.js v3 Documentation. Khi áp dụng vào dự án, hãy đối chiếu API cụ thể với tài liệu chính thức theo phiên bản bạn đang sử dụng.

Bắt đầu

Reference CRUD: Product

CRUD thực chiến

Forms & UX

Performance

Production

Testing

Scenario tổng hợp

Product CRUD: Index Frontend chuyên sâu

Product CRUD: Index Frontend chuyên sâu

Types

Search: local typing state, server owns canonical filter

Filter/sort dùng cùng một visit function

Deferred stats

Prefetch create/edit

Optimistic toggle

Delete: cố tình không optimistic

Full Index source

Tài liệu chính thức

​Product CRUD: Index Frontend chuyên sâu

​Types

​Search: local typing state, server owns canonical filter

​Filter/sort dùng cùng một visit function

​Deferred stats

​Prefetch create/edit

​Optimistic toggle

​Delete: cố tình không optimistic

​Pagination vẫn là Inertia navigation

​Full Index source

​Tài liệu chính thức

Product CRUD: Index Frontend chuyên sâu

Types

Search: local typing state, server owns canonical filter

Filter/sort dùng cùng một visit function

Deferred stats

Prefetch create/edit

Optimistic toggle

Delete: cố tình không optimistic

Pagination vẫn là Inertia navigation

Full Index source

Tài liệu chính thức