Deferred Props

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, toàn bộ deferred prop được fetch trong một request sau khi page ban đầu render. Tuy nhiên, bạn có thể fetch prop song song bằng cách nhóm chúng.

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'

    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'

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

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

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

Chỉ báo đang reload

Khi deferred prop đang được reload qua partial reload, component Deferred cung cấp boolean reloading qua slot. Điều này cho phép hiển thị loading indicator trong khi vẫn giữ dữ liệu đã tải trước đó.

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

<template>
  <Deferred data="permissions" #default="{ reloading }">
    <template #fallback>
      <div>Loading...</div>
    </template>

    <div :class="{ 'opacity-50': reloading }">
      <div v-for="permission in permissions">
        <!-- ... -->
      </div>
    </div>
  </Deferred>
</template>

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

export default () => (
  <Deferred data="permissions" fallback={<div>Loading...</div>}>
    {({ reloading }) => (
      <div className={reloading ? "opacity-50" : ""}>
        <PermissionsChildComponent />
      </div>
    )}
  </Deferred>
);

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

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

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

    {#snippet children({ reloading })}
        <div class:opacity-50={reloading}>
            {#each permissions as permission}
                <!-- ... -->
            {/each}
        </div>
    {/snippet}
</Deferred>

Prop reloading là false ở lần tải đầu và chuyển thành true khi partial reload đang chạy cho các deferred key. Nó trở lại false khi reload hoàn tất.

Xử lý lỗi

Mặc định, exception ném ra trong lúc resolve deferred prop sẽ tạo error response. Bạn có thể yêu cầu Inertia rescue các exception này bằng cách truyền rescue: true vào Inertia::defer().

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

Khi deferred prop được rescue, nó bị loại khỏi response và exception được báo qua exception handler của Laravel. Ở phía client, bạn có thể cung cấp slot rescue cho component Deferred để render fallback UI khi prop tải thất bại.

<script setup>
import { Deferred, router } from "@inertiajs/vue3";
</script>

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

    <template #rescue="{ reloading }">
      <div>
        <p>Failed to load permissions.</p>
        <button :disabled="reloading" @click="router.reload({ only: ['permissions'] })">Retry</button>
      </div>
    </template>

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

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

export default () => (
  <Deferred
    data="permissions"
    fallback={<div>Loading...</div>}
    rescue={({ reloading }) => (
      <div>
        <p>Failed to load permissions.</p>
        <button disabled={reloading} onClick={() => router.reload({ only: ["permissions"] })}>Retry</button>
      </div>
    )}
  >
    <PermissionsChildComponent />
  </Deferred>
);

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

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

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

    {#snippet rescue({ reloading })}
        <div>
            <p>Failed to load permissions.</p>
            <button disabled={reloading} onclick={() => router.reload({ only: ['permissions'] })}>Retry</button>
        </div>
    {/snippet}

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

Rescue state được giữ cho tới khi bạn chủ động reload prop đã rescue. Slot rescue nhận boolean reloading, cho phép disable nút retry hoặc hiển thị loading indicator trong khi reload đang diễn ra.

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

Phía máy chủ

Nhóm request

Phía client

Nhiều deferred prop

Chỉ báo đang reload

Xử lý lỗi

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

​Chỉ báo đang reload

​Xử lý lỗi

​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

Chỉ báo đang reload

Xử lý lỗi

Kết hợp với Once Props

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