router.get('/products', params, {
  only: ['products', 'filters'],
})

only: ['products', 'filters', 'stats']

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

not loaded
loading/reloading
resolved

failed but page still usable

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

is_active = !is_active

checkout
payment
inventory allocation
complex approval workflow
multi-record destructive mutation

/products?status=active&search=phone

status = inactive
search = laptop

URL/server state → props
transient interaction → local state
form lifecycle → useForm

type "iphone"
request A
↓
đổi status active
request B

function visitFilters(next: ProductFilters) {
  router.get('/products', next, {
    only: ['products', 'filters'],
    preserveState: true,
    preserveScroll: true,
    replace: true,
  })
}

recentlySuccessful
→ local form lifecycle

flash.success
→ cross-page redirect lifecycle

filter thay đổi
→ hide table
→ full page spinner
→ table xuất hiện lại

filter thay đổi
→ giữ table hiện tại
→ request partial reload
→ swap data khi response về

validation error
→ field errors

authorization error
→ server response / error page

deferred stats error
→ stats unavailable, CRUD vẫn dùng được

network failure
→ global toast / retry UX

bulk mutation       → Form/router visit
export async         → normal route + polling
preferences          → local/remembered state or persisted server state
inline edit          → useForm / optimistic
job progress         → polling
large list           → pagination / infinite scroll
sidebar query nặng  → deferred props