> ## Documentation Index
> Fetch the complete documentation index at: https://inertiajs-vi.tuantq.online/llms.txt
> Use this file to discover all available pages before exploring further.

# Deferred Props

<Warning>Bạn đang xem tài liệu Inertia.js v2. Inertia.js v3 đã được phát hành và hiện là phiên bản mặc định. Hãy xem [hướng dẫn nâng cấp](/v3/getting-started/upgrade-guide) để bắt đầu.</Warning>

Tính năng deferred props của Inertia cho phép trì hoãn việc tải một số dữ liệu trang cho đến sau khi lần render ban đầu hoàn tất. Điều này giúp cải thiện hiệu năng cảm nhận bằng cách cho phép trang ban đầu render nhanh nhất có thể.

## Phía máy chủ

Để defer một prop, bạn có thể dùng method `Inertia::defer()` khi trả response. Method nhận callback trả dữ liệu prop. Callback sẽ được thực thi trong một request riêng sau lần render trang ban đầu.

```php theme={null}
Route::get('/users', function () {
    return Inertia::render('Users/Index', [
        'users' => User::all(),
        'roles' => Role::all(),
        'permissions' => Inertia::defer(fn () => Permission::all()),
    ]);
});
```

### Nhóm request

Mặc định, tất cả deferred props được fetch trong một request sau khi trang ban đầu đã render, nhưng bạn có thể fetch song song bằng cách nhóm các prop.

```php theme={null}
Route::get('/users', function () {
    return Inertia::render('Users/Index', [
        'users' => User::all(),
        'roles' => Role::all(),
        'permissions' => Inertia::defer(fn () => Permission::all()),
        'teams' => Inertia::defer(fn () => Team::all(), 'attributes'),
        'projects' => Inertia::defer(fn () => Project::all(), 'attributes'),
        'tasks' => Inertia::defer(fn () => Task::all(), 'attributes'),
    ]);
});
```

Trong ví dụ trên, props `teams`, `projects` và `tasks` được fetch trong một request, còn prop `permissions` được fetch song song trong request riêng. Tên group là chuỗi tùy ý và có thể đặt theo ý bạn.

## Phía client

Ở phía client, Inertia cung cấp component `Deferred` để quản lý deferred props. Component tự động chờ các deferred prop được chỉ định có sẵn trước khi render children.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <script setup>
  import { Deferred } from '@inertiajs/vue3'
  </script>

  <template>
      <Deferred data="permissions">
          <template #fallback>
              <div>Loading...</div>
          </template>

          <div v-for="permission in permissions">
              <!-- ... -->
          </div>
      </Deferred>
  </template>
  ```

  ```jsx React icon="react" theme={null}
  import { Deferred } from '@inertiajs/react'

  export default () => (
      <Deferred data="permissions" fallback={<div>Loading...</div>}>
          <PermissionsChildComponent />
      </Deferred>
  )
  ```

  ```svelte Svelte 4 icon="s" theme={null}
  <script>
      import { Deferred } from '@inertiajs/svelte'

      export let permissions
  </script>

  <Deferred data="permissions">
      <svelte:fragment slot="fallback">
          <div>Loading...</div>
      </svelte:fragment>

      {#each permissions as permission}
          <!-- ... -->
      {/each}
  </Deferred>
  ```

  ```svelte Svelte 5 icon="s" theme={null}
  <script>
      import { Deferred } from '@inertiajs/svelte'

      let { permissions } = $props()
  </script>

  <Deferred data="permissions">
      {#snippet fallback()}
          <div>Loading...</div>
      {/snippet}

      {#each permissions as permission}
          <!-- ... -->
      {/each}
  </Deferred>
  ```
</CodeGroup>

## Nhiều deferred prop

Nếu cần chờ nhiều deferred prop cùng có sẵn, bạn có thể truyền một array vào prop `data`.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <script setup>
  import { Deferred } from '@inertiajs/vue3'
  </script>

  <template>
      <Deferred :data="['teams', 'users']">
          <template #fallback>
              <div>Loading...</div>
          </template>

          <!-- Props are now loaded -->
      </Deferred>
  </template>
  ```

  ```jsx React icon="react" theme={null}
  import { Deferred } from '@inertiajs/react'

  export default () => (
      <Deferred data={['teams', 'users']} fallback={<div>Loading...</div>}>
          <ChildComponent />
      </Deferred>
  )
  ```

  ```svelte Svelte 4 icon="s" theme={null}
  <script>
      import { Deferred } from '@inertiajs/svelte'

      export let teams
      export let users
  </script>

  <Deferred data={['teams', 'users']}>
      <svelte:fragment slot="fallback">
          <div>Loading...</div>
      </svelte:fragment>

      <!-- Props are now loaded -->
  </Deferred>
  ```

  ```svelte Svelte 5 icon="s" theme={null}
  <script>
      import { Deferred } from '@inertiajs/svelte'

      let { teams, users } = $props()
  </script>

  <Deferred data={['teams', 'users']}>
      {#snippet fallback()}
          <div>Loading...</div>
      {/snippet}

      <!-- Props are now loaded -->
  </Deferred>
  ```
</CodeGroup>

## Kết hợp với Once Props

Bạn có thể nối modifier `once()` vào deferred prop để đảm bảo dữ liệu chỉ được resolve một lần và được phía client ghi nhớ qua các lần điều hướng tiếp theo.

```php theme={null}
return Inertia::render('Dashboard', [
    'stats' => Inertia::defer(fn () => Stats::generate())->once(),
]);
```

Để biết thêm về once props, xem tài liệu [once props](/v2/data-props/once-props).

***

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

Bài dịch này được đối chiếu từ [tài liệu Inertia.js v2 chính thức](https://inertiajs.com/docs/v2/data-props/deferred-props). Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.