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

# Instant visits

Đôi khi bạn muốn điều hướng sang page mới mà không chờ server phản hồi. Instant visit cho phép Inertia ngay lập tức chuyển sang target page component trong khi server request chạy nền. Khi server phản hồi, prop thực tế sẽ được merge vào.

Khác với [client-side visits](/v3/the-basics/manual-visits#client-side-visits), vốn cập nhật page hoàn toàn ở client mà không gửi server request, instant visit vẫn thực hiện full server request. Khác biệt là người dùng thấy target page ngay thay vì chờ response.

## Cách dùng cơ bản

Để tạo instant visit, hãy cung cấp tên `component` đích cho `Link` hoặc `router.visit()`.

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

  <Link href="/dashboard" component="Dashboard">Dashboard</Link>
  ```

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

  <Link href="/dashboard" component="Dashboard">
    Dashboard
  </Link>;
  ```

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

  <a href="/dashboard" use:inertia={{ component: 'Dashboard' }}>Dashboard</a>

  <Link href="/dashboard" component="Dashboard">Dashboard</Link>
  ```
</CodeGroup>

Khi được click, Inertia ngay lập tức render component `Dashboard` trong khi server request chạy nền. Toàn bộ prop được merge vào khi response đến.

Target component phải có thể render mà không cần prop riêng của page, vì intermediate page chỉ có [shared props](/v3/data-props/shared-data). Bạn có thể dùng optional chaining hoặc conditional rendering để xử lý prop bị thiếu.

Instant visit bằng lập trình hoạt động tương tự thông qua tùy chọn `component` trên `router.visit()`.

```js theme={null}
router.visit("/dashboard", {
  component: "Dashboard",
});
```

## Shared props

Laravel adapter đưa key metadata `sharedProps` vào page response, liệt kê các key prop cấp cao nhất được đăng ký qua `Inertia::share()`.

```json theme={null}
{
  "component": "Dashboard",
  "props": { "auth": { "user": "..." }, "stats": { ... } },
  "sharedProps": ["auth"]
}
```

Inertia đọc danh sách này và mang các prop đó từ page hiện tại sang intermediate page. Các prop như `auth` có sẵn ngay, trong khi prop riêng của page như `stats` sẽ là `undefined` cho tới khi server phản hồi.

## Page props

Bạn có thể cung cấp prop cho intermediate page bằng tùy chọn `pageProps`. Điều này hữu ích khi truyền dữ liệu đã có ở page hiện tại hoặc đặt placeholder để hiển thị loading state trong lúc chờ server.

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

  <Link
    href="/posts/1"
    component="Posts/Show"
    :page-props="{ title: 'Loading...' }"
  >
    View Post
  </Link>
  ```

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

  <Link
    href="/posts/1"
    component="Posts/Show"
    pageProps={{ title: "Loading..." }}
  >
    View Post
  </Link>;
  ```

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

  <Link
    href="/posts/1"
    component="Posts/Show"
    pageProps={{ title: 'Loading...' }}
  >
    View Post
  </Link>
  ```
</CodeGroup>

Khi `pageProps` được truyền dưới dạng object, shared props không tự động được mang theo. Bạn toàn quyền kiểm soát prop của intermediate page.

Bạn cũng có thể truyền callback vào `pageProps`. Callback nhận props của page hiện tại và shared props làm đối số, nhờ đó bạn có thể spread chọn lọc chúng.

```js theme={null}
router.visit("/posts/1", {
  component: "Posts/Show",
  pageProps: (currentProps, sharedProps) => ({
    ...sharedProps,
    title: "Loading...",
  }),
});
```

## Tích hợp Wayfinder

Khi dùng [Wayfinder](https://github.com/laravel/wayfinder), bạn có thể dùng prop `instant` trên component `Link`. Inertia sẽ lấy target component từ định nghĩa route Wayfinder, không cần chỉ định thủ công prop `component`.

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

  <Link :href="show(1)" instant>View Post</Link>
  ```

  ```jsx React icon="react" theme={null}
  import { Link } from "@inertiajs/react";
  import { show } from "App/Http/Controllers/PostController";

  <Link href={show(1)} instant>
    View Post
  </Link>;
  ```

  ```svelte Svelte icon="s" theme={null}
  import { Link } from '@inertiajs/svelte'
  import { show } from 'App/Http/Controllers/PostController'

  <Link href={show(1)} instant>View Post</Link>
  ```
</CodeGroup>

Prop `instant` cũng có trên component `Form`.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  import { Form } from '@inertiajs/vue3'
  import { store } from 'App/Http/Controllers/PostController'

  <Form :action="store()" instant>
    <!-- ... -->
  </Form>
  ```

  ```jsx React icon="react" theme={null}
  import { Form } from "@inertiajs/react";
  import { store } from "App/Http/Controllers/PostController";

  <Form action={store()} instant>
    {/* ... */}
  </Form>;
  ```

  ```svelte Svelte icon="s" theme={null}
  import { Form } from '@inertiajs/svelte'
  import { store } from 'App/Http/Controllers/PostController'

  <Form action={store()} instant>
    <!-- ... -->
  </Form>
  ```
</CodeGroup>

Prop `component` được chỉ định rõ luôn ưu tiên hơn `instant`.

### Cấu hình Wayfinder

Để đưa thông tin component vào định nghĩa route Wayfinder, hãy bật tùy chọn `generate.inertia.component` trong file cấu hình `config/wayfinder.php`.

```php config/wayfinder.php theme={null}
return [
    'generate' => [
        'inertia' => [
            'component' => true,
        ],
    ],
];
```

Sau khi bật tùy chọn và sinh lại route Wayfinder, mỗi route definition sẽ chứa tên component mà Inertia render cho route đó.

### Component có điều kiện

Controller action có thể render các component khác nhau theo điều kiện, khiến prop `instant` không thể tự xác định component cần dùng. Bạn có thể gọi phương thức `withComponent()` trên route function của Wayfinder để chỉ định target component.

```js theme={null}
import { show } from "App/Http/Controllers/DashboardController";

router.visit(show.withComponent("Dashboard/Admin"));
```

## Tắt shared prop keys

Bạn có thể tắt key metadata `sharedProps` trong file cấu hình `config/inertia.php`. Server vẫn resolve và đưa giá trị shared prop vào response nhưng metadata liệt kê key nào là shared sẽ bị bỏ. Không có danh sách này, client không thể xác định prop nào cần mang sang trong instant visit.

```php config/inertia.php theme={null}
return [
    'expose_shared_prop_keys' => false,
];
```

***

## 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/the-basics/instant-visits). 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.