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

Đây là tài liệu Inertia.js v1, phiên bản không còn được duy trì tích cực. Vui lòng tham khảo tài liệu v3.

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ụ, hãy xem một trang “danh sách người dùng” có danh sách người dùng cùng tùy chọn lọc theo công ty. Ở request đầu tiên đến trang, cả props users và companies đều được truyền vào page component. Tuy nhiên, ở những lần truy cập tiếp theo đến cùng trang đó (chẳng hạn để lọc người dùng), bạn có thể chỉ yêu cầu dữ liệu users từ máy chủ mà không yêu cầu companies. Sau đó Inertia sẽ tự động merge dữ liệu một phần trả về từ máy chủ với dữ liệu đã có sẵn trong bộ nhớ 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.

import { router } from '@inertiajs/vue2'

router.visit(url, {
    only: ['users'],
})

import { router } from '@inertiajs/vue3'

router.visit(url, {
    only: ['users'],
})

import { router } from '@inertiajs/react'

router.visit(url, {
    only: ['users'],
})

import { router } from '@inertiajs/svelte'

router.visit(url, {
    only: ['users'],
})

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.

import { router } from '@inertiajs/vue2'

router.visit(url, {
    except: ['users'],
})

import { router } from '@inertiajs/vue3'

router.visit(url, {
    except: ['users'],
})

import { router } from '@inertiajs/react'

router.visit(url, {
    except: ['users'],
})

import { router } from '@inertiajs/svelte'

router.visit(url, {
    except: ['users'],
})

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.

import { router } from '@inertiajs/vue2'

router.reload({ only: ['users'] })

import { router } from '@inertiajs/vue3'

router.reload({ only: ['users'] })

import { router } from '@inertiajs/react'

router.reload({ only: ['users'] })

import { router } from '@inertiajs/svelte'

router.reload({ only: ['users'] })

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.

import { Link } from '@inertiajs/vue2'

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

import { Link } from '@inertiajs/vue3'

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

import { Link } from '@inertiajs/react'

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

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>

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

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 phương thức Inertia::lazy() để chỉ định rằng một prop sẽ không bao giờ được gửi kèm trừ khi được yêu cầu rõ ràng bằng tùy chọn only:

return Inertia::render('Users/Index', [
    'users' => Inertia::lazy(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.

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:

return Inertia::render('Users/Index', [
    // ALWAYS included on standard visits
    // OPTIONALLY included on partial reloads
    // ALWAYS evaluated
    'users' => User::all(),

    // ALWAYS included on standard visits
    // OPTIONALLY included on partial reloads
    // ONLY evaluated when needed
    'users' => fn () => User::all(),

    // NEVER included on standard visits
    // OPTIONALLY included on partial reloads
    // ONLY evaluated when needed
    'users' => Inertia::lazy(fn () => User::all()),

    // ALWAYS included on standard visits
    // ALWAYS included on partial reloads
    // ALWAYS evaluated
    'users' => Inertia::always(User::all()),
]);

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

Nâng cao

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

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

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

Sử dụng liên kết

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

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

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

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

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

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

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

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

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

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

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

Sử dụng liên kết

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

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