Deferred Props

Bạn đang xem tài liệu Inertia.js v2. Inertia.js v3 đã được phát hành và hiện là phiên bản mặc định. Hãy xem hướng dẫn nâng cấp để bắt đầu.

Tính năng deferred props của Inertia cho phép trì hoãn việc tải một số dữ liệu trang cho đến sau khi lần render ban đầu hoàn tất. Điều này giúp cải thiện hiệu năng cảm nhận bằng cách cho phép trang ban đầu render nhanh nhất có thể.

Phía máy chủ

Để defer một prop, bạn có thể dùng method Inertia::defer() khi trả response. Method nhận callback trả dữ liệu prop. Callback sẽ được thực thi trong một request riêng sau lần render trang ban đầu.

Route::get('/users', function () {
    return Inertia::render('Users/Index', [
        'users' => User::all(),
        'roles' => Role::all(),
        'permissions' => Inertia::defer(fn () => Permission::all()),
    ]);
});

Nhóm request

Mặc định, tất cả deferred props được fetch trong một request sau khi trang ban đầu đã render, nhưng bạn có thể fetch song song bằng cách nhóm các prop.

Route::get('/users', function () {
    return Inertia::render('Users/Index', [
        'users' => User::all(),
        'roles' => Role::all(),
        'permissions' => Inertia::defer(fn () => Permission::all()),
        'teams' => Inertia::defer(fn () => Team::all(), 'attributes'),
        'projects' => Inertia::defer(fn () => Project::all(), 'attributes'),
        'tasks' => Inertia::defer(fn () => Task::all(), 'attributes'),
    ]);
});

Trong ví dụ trên, props teams, projects và tasks được fetch trong một request, còn prop permissions được fetch song song trong request riêng. Tên group là chuỗi tùy ý và có thể đặt theo ý bạn.

Phía client

Ở phía client, Inertia cung cấp component Deferred để quản lý deferred props. Component tự động chờ các deferred prop được chỉ định có sẵn trước khi render children.

<script setup>
import { Deferred } from '@inertiajs/vue3'
</script>

<template>
    <Deferred data="permissions">
        <template #fallback>
            <div>Loading...</div>
        </template>

        <div v-for="permission in permissions">
            <!-- ... -->
        </div>
    </Deferred>
</template>

import { Deferred } from '@inertiajs/react'

export default () => (
    <Deferred data="permissions" fallback={<div>Loading...</div>}>
        <PermissionsChildComponent />
    </Deferred>
)

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

    export let permissions
</script>

<Deferred data="permissions">
    <svelte:fragment slot="fallback">
        <div>Loading...</div>
    </svelte:fragment>

    {#each permissions as permission}
        <!-- ... -->
    {/each}
</Deferred>

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

    let { permissions } = $props()
</script>

<Deferred data="permissions">
    {#snippet fallback()}
        <div>Loading...</div>
    {/snippet}

    {#each permissions as permission}
        <!-- ... -->
    {/each}
</Deferred>

Nhiều deferred prop

Nếu cần chờ nhiều deferred prop cùng có sẵn, bạn có thể truyền một array vào prop data.

<script setup>
import { Deferred } from '@inertiajs/vue3'
</script>

<template>
    <Deferred :data="['teams', 'users']">
        <template #fallback>
            <div>Loading...</div>
        </template>

        <!-- Props are now loaded -->
    </Deferred>
</template>

import { Deferred } from '@inertiajs/react'

export default () => (
    <Deferred data={['teams', 'users']} fallback={<div>Loading...</div>}>
        <ChildComponent />
    </Deferred>
)

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

    export let teams
    export let users
</script>

<Deferred data={['teams', 'users']}>
    <svelte:fragment slot="fallback">
        <div>Loading...</div>
    </svelte:fragment>

    <!-- Props are now loaded -->
</Deferred>

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

    let { teams, users } = $props()
</script>

<Deferred data={['teams', 'users']}>
    {#snippet fallback()}
        <div>Loading...</div>
    {/snippet}

    <!-- Props are now loaded -->
</Deferred>

Kết hợp với Once Props

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

return Inertia::render('Dashboard', [
    'stats' => Inertia::defer(fn () => Stats::generate())->once(),
]);

Để biết thêm về once props, xem tài liệu 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 v2 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

Phía máy chủ

Nhóm request

Phía client

Nhiều deferred prop

Kết hợp với Once Props

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

​Phía máy chủ

​Nhóm request

​Phía client

​Nhiều deferred prop

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

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

Phía máy chủ

Nhóm request

Phía client

Nhiều deferred prop

Kết hợp với Once Props

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