> ## 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.

# Tải lại một phần

Khi truy cập lại đúng trang hiện tại, không phải lúc nào cũng cần lấy lại toàn bộ dữ liệu của trang từ máy chủ. Thực tế, chỉ chọn một tập con dữ liệu có thể là một cách tối ưu hiệu năng hữu ích nếu bạn chấp nhận một phần dữ liệu trang trở nên cũ. Inertia hỗ trợ việc này thông qua tính năng "partial reload".

Ví dụ, xét page "danh sách người dùng" chứa danh sách user và tùy chọn lọc user theo công ty. Ở request đầu tiên tới page, cả prop `users` và `companies` được truyền vào page component. Tuy nhiên ở các visit sau tới cùng page, chẳng hạn để lọc user, bạn chỉ có thể yêu cầu dữ liệu `users` từ server mà không tải lại `companies`. Inertia sau đó tự động merge partial data server trả về với dữ liệu đã có trong memory phía client.

Partial reload chỉ hoạt động với các lần truy cập đến cùng một page component.

## Chỉ lấy một số prop nhất định

Để thực hiện partial reload, dùng tùy chọn visit `only` để chỉ định dữ liệu máy chủ cần trả về. Tùy chọn này là một mảng các key tương ứng với key của props.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from "@inertiajs/vue3";

  router.visit(url, {
    only: ["users"],
  });
  ```

  ```js React icon="react" theme={null}
  import { router } from "@inertiajs/react";

  router.visit(url, {
    only: ["users"],
  });
  ```

  ```js Svelte icon="s" theme={null}
  import { router } from "@inertiajs/svelte";

  router.visit(url, {
    only: ["users"],
  });
  ```
</CodeGroup>

## Loại trừ một số prop nhất định

Ngoài tùy chọn visit `only`, bạn cũng có thể dùng tùy chọn `except` để chỉ định dữ liệu máy chủ cần loại trừ. Tùy chọn này cũng là một mảng key tương ứng với key của props.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from "@inertiajs/vue3";

  router.visit(url, {
    except: ["users"],
  });
  ```

  ```js React icon="react" theme={null}
  import { router } from "@inertiajs/react";

  router.visit(url, {
    except: ["users"],
  });
  ```

  ```js Svelte icon="s" theme={null}
  import { router } from "@inertiajs/svelte";

  router.visit(url, {
    except: ["users"],
  });
  ```
</CodeGroup>

## Cú pháp rút gọn của router

Vì partial reload chỉ có thể thực hiện trên đúng page component mà người dùng đang ở, gần như lúc nào cũng hợp lý khi dùng phương thức `router.reload()`, phương thức này tự động dùng URL hiện tại.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from "@inertiajs/vue3";

  router.reload({ only: ["users"] });
  ```

  ```js React icon="react" theme={null}
  import { router } from "@inertiajs/react";

  router.reload({ only: ["users"] });
  ```

  ```js Svelte icon="s" theme={null}
  import { router } from "@inertiajs/svelte";

  router.reload({ only: ["users"] });
  ```
</CodeGroup>

## Sử dụng liên kết

Bạn cũng có thể thực hiện partial reload bằng liên kết Inertia thông qua thuộc tính `only`.

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

  <Link href="/users?active=true" :only="['users']">Show active</Link>
  ```

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

  <Link href="/users?active=true" only={["users"]}>
    Show active
  </Link>;
  ```

  ```svelte Svelte icon="s" theme={null}
  import { inertia, Link } from '@inertiajs/svelte'

  <a href="/users?active=true" use:inertia={{ only: ['users'] }}>Show active</a>

  <Link href="/users?active=true" only={['users']}>Show active</Link>
  ```
</CodeGroup>

## Đánh giá dữ liệu theo kiểu lazy

Để partial reload đạt hiệu quả cao nhất, hãy dùng cả lazy data evaluation khi trả props từ route hoặc controller phía máy chủ. Bạn có thể thực hiện bằng cách bọc toàn bộ dữ liệu trang tùy chọn trong một closure.

```php theme={null}
return Inertia::render('Users/Index', [
    'users' => fn () => User::all(),
    'companies' => fn () => Company::all(),
]);
```

Khi Inertia thực hiện request, nó sẽ xác định dữ liệu nào thực sự cần thiết rồi mới evaluate closure. Điều này có thể cải thiện đáng kể hiệu năng của những trang có nhiều dữ liệu tùy chọn.

Ngoài ra, Inertia cung cấp method `Inertia::optional()` để chỉ định một prop không bao giờ được đưa vào trừ khi được yêu cầu rõ ràng bằng tùy chọn `only`:

```php theme={null}
return Inertia::render('Users/Index', [
    'users' => Inertia::optional(fn () => User::all()),
]);
```

Ngược lại, bạn có thể dùng phương thức `Inertia::always()` để chỉ định một prop luôn phải được gửi kèm, kể cả khi prop đó không được yêu cầu rõ ràng trong partial reload.

```php theme={null}
return Inertia::render('Users/Index', [
    'users' => Inertia::always(User::all()),
]);
```

Dưới đây là tóm tắt của từng cách tiếp cận:

| Cách tiếp cận                                                                         | Visit tiêu chuẩn | Partial reload | Thời điểm evaluate |   |
| :------------------------------------------------------------------------------------ | :--------------- | :------------- | :----------------- | - |
| <span style={{whiteSpace: 'nowrap'}}>`User::all()`</span>                             | Luôn luôn        | Tùy chọn       | Luôn luôn          |   |
| <span style={{whiteSpace: 'nowrap'}}>`fn () => User::all()`</span>                    | Luôn luôn        | Tùy chọn       | Chỉ khi cần        |   |
| <span style={{whiteSpace: 'nowrap'}}>`Inertia::optional(fn () => User::all())`</span> | Không bao giờ    | Tùy chọn       | Chỉ khi cần        |   |
| <span style={{whiteSpace: 'nowrap'}}>`Inertia::always(fn () => User::all())`</span>   | Luôn luôn        | Luôn luôn      | Luôn luôn          |   |

## Giữ lỗi

Vì Laravel adapter chia sẻ error bằng `Inertia::always()`, chúng có trong mọi response, kể cả partial reload không chạy validation. Điều này có nghĩa error bag rỗng từ server sẽ ghi đè validation error phía client hiện có. Bạn có thể dùng tùy chọn `preserveErrors` để giữ error hiện tại khi server không trả error mới.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from '@inertiajs/vue3'

  router.reload({
      only: ['posts'],
      preserveErrors: true,
  })
  ```

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

  router.reload({
      only: ['posts'],
      preserveErrors: true,
  })
  ```

  ```js Svelte icon="s" theme={null}
  import { router } from '@inertiajs/svelte'

  router.reload({
      only: ['posts'],
      preserveErrors: true,
  })
  ```
</CodeGroup>

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

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

```php theme={null}
return Inertia::render('Users/Index', [
    'users' => Inertia::optional(fn () => User::all())->once(),
]);
```

Để biết thêm về once props, xem tài liệu [once props](/v3/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 v3 chính thức](https://inertiajs.com/docs/v3/data-props/partial-reloads). 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.