Prefetching

Inertia hỗ trợ prefetch dữ liệu cho những trang có khả năng được truy cập tiếp theo. Điều này giúp cải thiện hiệu năng cảm nhận của ứng dụng bằng cách cho phép dữ liệu được tải ở nền trong khi người dùng vẫn đang tương tác với trang hiện tại.

Prefetch bằng Link

Để prefetch dữ liệu cho page, thêm prop prefetch vào Inertia link component. Mặc định Inertia prefetch dữ liệu khi user hover lên link hơn 75ms. Bạn có thể tùy chỉnh hover delay bằng tùy chọn prefetch.hoverDelay trong application defaults.

import { Link } from '@inertiajs/vue3'

<Link href="/users" prefetch>Users</Link>

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

<Link href="/users" prefetch>
  Users
</Link>;

import { inertia } from '@inertiajs/svelte'

<a href="/users" use:inertia={{ prefetch: true }}>Users</a>

Mặc định, dữ liệu được cache 30 giây trước khi bị evict. Bạn có thể tùy chỉnh bằng tùy chọn prefetch.cacheFor trong application defaults, hoặc theo từng link bằng prop cacheFor của component Link.

import { Link } from '@inertiajs/vue3'

<Link href="/users" prefetch cache-for="1m">Users</Link>
<Link href="/users" prefetch cache-for="10s">Users</Link>
<Link href="/users" prefetch :cache-for="5000">Users</Link>

import { Link } from '@inertiajs/react'

<Link href="/users" prefetch cacheFor="1m">Users</Link>
<Link href="/users" prefetch cacheFor="10s">Users</Link>
<Link href="/users" prefetch cacheFor={5000}>Users</Link>

import { inertia } from '@inertiajs/svelte'

<a href="/users" use:inertia={{ prefetch: true, cacheFor: '1m' }}>Users</a>
<a href="/users" use:inertia={{ prefetch: true, cacheFor: '10s' }}>Users</a>
<a href="/users" use:inertia={{ prefetch: true, cacheFor: 5000 }}>Users</a>

Thay vì prefetch khi hover, bạn cũng có thể bắt đầu prefetch tại sự kiện mousedown bằng cách truyền giá trị click vào prop prefetch.

import { Link } from '@inertiajs/vue3'

<Link href="/users" prefetch="click">Users</Link>

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

<Link href="/users" prefetch="click">
  Users
</Link>;

import { inertia } from '@inertiajs/svelte'

<a href="/users" use:inertia={{ prefetch: 'click' }}>Users</a>

Nếu chắc chắn người dùng sẽ truy cập một trang tiếp theo, bạn cũng có thể prefetch dữ liệu ngay khi component được mount.

import { Link } from '@inertiajs/vue3'

<Link href="/users" prefetch="mount">Users</Link>

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

<Link href="/users" prefetch="mount">
  Users
</Link>;

import { inertia } from '@inertiajs/svelte'

<a href="/users" use:inertia={{ prefetch: 'mount' }}>Users</a>

Bạn cũng có thể kết hợp nhiều chiến lược prefetch bằng cách truyền một mảng giá trị vào prop prefetch.

import { Link } from '@inertiajs/vue3'

<Link href="/users" :prefetch="['mount', 'hover']">Users</Link>

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

<Link href="/users" prefetch={["mount", "hover"]}>
  Users
</Link>;

import { inertia } from '@inertiajs/svelte'

<a href="/users" use:inertia={{ prefetch: ['mount', 'hover'] }}>Users</a>

Prefetch bằng lập trình

Bạn có thể prefetch dữ liệu bằng lập trình với router.prefetch. Chữ ký của phương thức này giống router.visit, ngoại trừ đối số thứ ba cho phép bạn chỉ định các tùy chọn prefetch. Khi không chỉ định tùy chọn cacheFor, giá trị mặc định là 30 giây.

router.prefetch("/users", { method: "get", data: { page: 2 } });

router.prefetch(
  "/users",
  { method: "get", data: { page: 2 } },
  { cacheFor: "1m" },
);

Inertia cũng cung cấp hook usePrefetch để theo dõi trạng thái prefetch của trang hiện tại. Hook trả về thông tin cho biết trang có đang prefetch hay không, đã được prefetch chưa, lần cập nhật gần nhất là khi nào, cùng phương thức flush để chỉ xóa cache của trang hiện tại.

import { usePrefetch } from "@inertiajs/vue3";

const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch();

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

const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch();

import { usePrefetch } from "@inertiajs/svelte";

const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch();

Bạn cũng có thể truyền các tùy chọn visit khi cần phân biệt nhiều cấu hình request khác nhau cho cùng một URL.

import { usePrefetch } from "@inertiajs/vue3";

const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch({
  headers: { "X-Custom-Header": "value" },
});

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

const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch({
  headers: { "X-Custom-Header": "value" },
});

import { usePrefetch } from "@inertiajs/svelte";

const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch({
  headers: { "X-Custom-Header": "value" },
});

Cache tags

Cache tag cho phép bạn nhóm dữ liệu prefetch có liên quan và vô hiệu hóa toàn bộ dữ liệu cache mang tag đó khi một sự kiện cụ thể xảy ra. Để gắn tag cho dữ liệu cache, hãy truyền prop cacheTags vào component Link.

<script setup>
import { Link } from "@inertiajs/vue3";
</script>

<template>
  <Link href="/users" prefetch cache-tags="users">Users</Link>
  <Link href="/dashboard" prefetch :cache-tags="['dashboard', 'stats']"
    >Dashboard</Link
  >
</template>

import { Link } from '@inertiajs/react'

<Link href="/users" prefetch cacheTags="users">Users</Link>
<Link href="/dashboard" prefetch cacheTags={['dashboard', 'stats']}>Dashboard</Link>

import { inertia } from '@inertiajs/svelte'

<a href="/users" use:inertia={{ prefetch: true, cacheTags: 'users' }}>Users</a>
<a href="/dashboard" use:inertia={{ prefetch: true, cacheTags: ['dashboard', 'stats'] }}>Dashboard</a>

Khi prefetch bằng lập trình, hãy truyền cacheTags trong đối số thứ ba của router.prefetch.

router.prefetch("/users", {}, { cacheTags: "users" });
router.prefetch("/dashboard", {}, { cacheTags: ["dashboard", "stats"] });

Vô hiệu hóa cache

Bạn có thể xóa thủ công prefetch cache bằng cách gọi router.flushAll để xóa toàn bộ dữ liệu cache, hoặc router.flush để xóa cache của một trang cụ thể.

// Flush all prefetch cache
router.flushAll();

// Flush cache for a specific page
router.flush("/users", { method: "get", data: { page: 2 } });

// Using the usePrefetch hook
const { flush } = usePrefetch();

// Flush cache for the current page
flush();

Để kiểm soát chi tiết hơn, có thể flush cache theo tag bằng router.flushByCacheTags. Thao tác này xóa mọi cached response chứa bất kỳ tag được chỉ định.

// Flush all responses tagged with 'users'
router.flushByCacheTags("users");

// Flush all responses tagged with 'dashboard' OR 'stats'
router.flushByCacheTags(["dashboard", "stats"]);

Tự động xóa cache

Mặc định, Inertia không tự động xóa prefetch cache khi bạn điều hướng sang trang mới. Dữ liệu cache chỉ bị loại bỏ khi hết hạn theo thời lượng cache. Nếu muốn xóa toàn bộ dữ liệu cache trong mỗi lần điều hướng, bạn có thể thiết lập một event listener.

import { router } from "@inertiajs/vue3";

router.on("navigate", () => router.flushAll());

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

router.on("navigate", () => router.flushAll());

import { router } from "@inertiajs/svelte";

router.on("navigate", () => router.flushAll());

Vô hiệu hóa khi gửi request

Để tự động vô hiệu hóa cache khi gửi request, hãy truyền prop invalidateCacheTags vào component Form. Các tag được chỉ định sẽ bị xóa khi form được gửi thành công.

<script setup>
import { Form } from "@inertiajs/vue3";
</script>

<template>
  <Form
    action="/users"
    method="post"
    :invalidate-cache-tags="['users', 'dashboard']"
  >
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Create User</button>
  </Form>
</template>

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

export default () => (
  <Form
    action="/users"
    method="post"
    invalidateCacheTags={["users", "dashboard"]}
  >
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Create User</button>
  </Form>
);

<script>
    import { Form } from '@inertiajs/svelte'
</script>

<Form action="/users" method="post" invalidateCacheTags={['users', 'dashboard']}>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Create User</button>
</Form>

Khi dùng helper useForm, bạn có thể đưa invalidateCacheTags vào các tùy chọn visit.

import { useForm } from "@inertiajs/vue3";

const form = useForm({
  name: "",
  email: "",
});

const submit = () => {
  form.post("/users", {
    invalidateCacheTags: ["users", "dashboard"],
  });
};

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

const { data, setData, post } = useForm({
  name: "",
  email: "",
});

function submit(e) {
  e.preventDefault();
  post("/users", {
    invalidateCacheTags: ["users", "dashboard"],
  });
}

import { useForm } from "@inertiajs/svelte";

const form = useForm({
  name: "",
  email: "",
});

function submit() {
  form.post("/users", {
    invalidateCacheTags: ["users", "dashboard"],
  });
}

Bạn cũng có thể vô hiệu hóa cache tag bằng các visit lập trình thông qua tùy chọn invalidateCacheTags.

router.delete(`/users/${userId}`, {
  invalidateCacheTags: ["users", "dashboard"],
});

router.post("/posts", postData, {
  invalidateCacheTags: ["posts", "recent-posts"],
});

Stale-while-revalidate

Mặc định, Inertia fetch bản dữ liệu mới khi user truy cập page nếu cache cũ hơn thời lượng cache. Bạn có thể tùy chỉnh bằng cách truyền tuple vào prop cacheFor. Giá trị đầu tiên trong mảng là số giây cache được xem là còn mới, còn giá trị thứ hai xác định khoảng thời gian dữ liệu cũ vẫn có thể được phục vụ trước khi bắt buộc phải lấy dữ liệu mới từ server.

import { Link } from '@inertiajs/vue3'

<Link href="/users" prefetch :cacheFor="['30s', '1m']">Users</Link>

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

<Link href="/users" prefetch cacheFor={["30s", "1m"]}>
  Users
</Link>;

import { inertia } from '@inertiajs/svelte'

<a href="/users" use:inertia={{ prefetch: true, cacheFor: ['30s', '1m'] }}>Users</a>

Nếu request được thực hiện trong khoảng dữ liệu còn mới (trước giá trị thứ nhất), cache được trả về ngay mà không gửi request đến server. Nếu request được thực hiện trong khoảng stale (giữa hai giá trị), giá trị cũ được trả cho người dùng đồng thời một request chạy nền sẽ làm mới dữ liệu cache. Khi dữ liệu mới được trả về, nó được gộp vào trang để người dùng có dữ liệu cập nhật nhất. Nếu request được thực hiện sau giá trị thứ hai, cache được xem là hết hạn và page cùng dữ liệu được fetch từ server như request bình thường.

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

Prefetch bằng Link

Prefetch bằng lập trình

Cache tags

Vô hiệu hóa cache

Tự động xóa cache

Vô hiệu hóa khi gửi request

Stale-while-revalidate

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

​Prefetch bằng Link

​Prefetch bằng lập trình

​Cache tags

​Vô hiệu hóa cache

​Tự động xóa cache

​Vô hiệu hóa khi gửi request

​Stale-while-revalidate

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

Prefetch bằng Link

Prefetch bằng lập trình

Cache tags

Vô hiệu hóa cache

Tự động xóa cache

Vô hiệu hóa khi gửi request

Stale-while-revalidate

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