import { router } from '@inertiajs/react'

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

return Inertia::render('Users/Index', [
    'users' => fn () => User::query()->paginate(),
    'roles' => fn () => Role::query()->orderBy('name')->get(),
]);

return Inertia::render('Dashboard', [
    'recentOrders' => Order::query()->latest()->limit(10)->get(),
    'analytics' => Inertia::defer(
        fn () => app(AnalyticsService::class)->summary(),
        rescue: true,
    ),
]);

import { Deferred } from '@inertiajs/react'

export default function Dashboard({ recentOrders, analytics }) {
  return (
    <>
      <OrderList orders={recentOrders} />

      <Deferred data="analytics" fallback={<AnalyticsSkeleton />}>
        <AnalyticsPanel data={analytics} />
      </Deferred>
    </>
  )
}

import { Link } from '@inertiajs/react'

<Link href="/users" prefetch cacheFor="30s">
  Người dùng
</Link>

Prop có cần cho above-the-fold không?
  yes -> trả ngay
  no  -> deferred nếu dữ liệu tốn nhiều thời gian xử lý

Same page reload chỉ đổi một phần data?
  yes -> partial reload + lazy server prop

User gần như chắc sẽ vào page kế tiếp?
  yes -> cân nhắc prefetch + TTL ngắn

Partial reload -> cùng page component, chỉ xin subset props
Deferred props -> secondary data đến sau initial render
Prefetch       -> lấy trước response có khả năng dùng sắp tới

'pageData' => fn () => [
    'products' => $this->products(),
    'stats' => $this->stats(),
    'categories' => $this->categories(),
]

'products' => fn () => $this->products(),
'categories' => fn () => $this->categories(),
'stats' => Inertia::defer(fn () => $this->stats()),

initial HTML/JSON bytes
partial response bytes
SQL query count
server duration
deferred completion duration
prefetch hit/waste ratio

<Link href={editUrl} prefetch cacheFor="20s">
    Sửa
</Link>

Products list: critical
Stats chart: secondary/deferred