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, 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().

import { Link } from '@inertiajs/vue3'

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

import { Link } from "@inertiajs/react";

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

import { inertia, Link } from '@inertiajs/svelte'

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

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

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. 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().

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().

{
  "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.

import { Link } from '@inertiajs/vue3'

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

import { Link } from "@inertiajs/react";

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

import { Link } from '@inertiajs/svelte'

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

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.

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

Tích hợp Wayfinder

Khi dùng 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.

import { Link } from '@inertiajs/vue3' import { show } from
'App/Http/Controllers/PostController'

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

import { Link } from "@inertiajs/react";
import { show } from "App/Http/Controllers/PostController";

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

import { Link } from '@inertiajs/svelte'
import { show } from 'App/Http/Controllers/PostController'

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

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

import { Form } from '@inertiajs/vue3'
import { store } from 'App/Http/Controllers/PostController'

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

import { Form } from "@inertiajs/react";
import { store } from "App/Http/Controllers/PostController";

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

import { Form } from '@inertiajs/svelte'
import { store } from 'App/Http/Controllers/PostController'

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

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.

config/wayfinder.php

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.

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.

config/inertia.php

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

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Dữ liệu & Props

Bảo mật

Nâng cao

Cách dùng cơ bản

Shared props

Page props

Tích hợp Wayfinder

Cấu hình Wayfinder

Component có điều kiện

Tắt shared prop keys

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

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

​Shared props

​Page props

​Tích hợp Wayfinder

​Cấu hình Wayfinder

​Component có điều kiện

​Tắt shared prop keys

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

Cách dùng cơ bản

Shared props

Page props

Tích hợp Wayfinder

Cấu hình Wayfinder

Component có điều kiện

Tắt shared prop keys

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