Prefetching

Navigation link Panel mengambil Page tujuan sebelum link benar-benar diklik. Fitur aktif secara default pada hover, sehingga request hanya terjadi untuk link yang benar-benar disentuh pointer dan navigasi berikutnya terasa instan.

Inertia sendiri sudah merupakan single-page application, sehingga tidak ada mode SPA tambahan yang perlu diaktifkan. Prefetching adalah bagian dari konsep spa() Filament yang relevan di sini, dan dikontrol melalui satu setting pada Panel.

Contoh minimal yang berfungsi

<?php

declare(strict_types=1);

namespace App\Panels\Admin;

use PandaPanel\Core\Panel;
use PandaPanel\Core\PanelProvider;

final class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->path('admin')
            ->auth()
            ->prefetch('hover');   // the default; write it to be explicit
    }
}

Hover pada Users di sidebar akan melakukan fetch /admin/users. Saat diklik, Page dirender dari data yang sebelumnya sudah di-fetch.

Method

/**
 * @param  bool|'hover'|'mount'|'click'  $prefetch
 */
public function prefetch(bool|string $prefetch = 'hover'): self;

/** @return 'hover'|'mount'|'click'|null */
public function getPrefetch(): ?string;

Argument dinormalisasi satu kali pada Panel:

$this->prefetch = match ($prefetch) {
    false => null,
    true => 'hover',
    default => $prefetch,
};

Pemanggilan	getPrefetch()	Perilaku
(tidak ada)	'hover'	default Panel
prefetch()	'hover'	fetch ketika pointer berada di atas link
prefetch(true)	'hover'	sama
prefetch('hover')	'hover'	sama
prefetch('mount')	'mount'	fetch setiap link visible segera saat Page dirender
prefetch('click')	'click'	fetch pada mousedown sebelum click selesai
prefetch(false)	null	nonaktif

use PandaPanel\Core\Panel;

Panel::make('a')->prefetch('mount')->getPrefetch();   // 'mount'
Panel::make('b')->prefetch(false)->getPrefetch();     // null
Panel::make('c')->prefetch(true)->getPrefetch();      // 'hover'
Panel::make('d')->prefetch('click')->getPrefetch();   // 'click'

Tiga mode tersebut adalah value LinkPrefetchOption milik Inertia dan diteruskan secara langsung ke <Link :prefetch>.

Data yang dikirim ke frontend

Mode menjadi bagian shared props Panel sehingga semua component di shell membaca satu value yang sama:

panel('admin')->toSharedArray()['prefetch'];   // 'hover'

/** Matches Inertia's own `LinkPrefetchOption`. */
export type PanelPrefetchMode = 'hover' | 'mount' | 'click';

export interface PanelDefinition {
    // …
    prefetch: PanelPrefetchMode | null;
}

null berarti off, dan setiap consumer mengubahnya menjadi boolean false bila diperlukan:

const prefetch = computed(() => panel.value?.prefetch ?? false);

Fallback yang sama menangani keadaan ketika tidak ada Panel sama sekali — shell dapat tetap dirender pada frame navigasi yang meninggalkan Panel.

Tempat setting diterapkan

Dua component membaca setting ini, dan keduanya adalah component yang merender navigation hasil server:

Component	Link
PanelNavigationItem.vue	setiap sidebar item dan seluruh child
PanelSubNavigation.vue	link antar-Page milik satu record

<Link
    :href="item.href"
    :prefetch="prefetch"
    :aria-current="item.active ? 'page' : undefined"
>
    <component :is="icon" v-if="icon" />
    <span>{{ item.label }}</span>
</Link>

Tidak diterapkan di tempat lain. PanelClusterBar.vue merender <Link> biasa tanpa prop prefetch, dan link yang Anda tulis sendiri di custom Page component menjadi tanggung jawab Anda sendiri.

Prefetch pada link buatan sendiri

Baca setting milik Panel daripada hardcode mode, agar Panel yang menonaktifkan prefetch juga menonaktifkannya pada link custom:

<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import { computed } from 'vue';
import { usePanel } from '@/panel/composables/usePanel';

const { panel } = usePanel();

const prefetch = computed(() => panel.value?.prefetch ?? false);
</script>

<template>
    <Link href="/admin/users" :prefetch="prefetch">Users</Link>
</template>

Full-page link tidak pernah diprefetch

Item yang dinyatakan Panel sebagai full-page destination dirender sebagai plain <a> tanpa prefetch. Destination tersebut memang harus meninggalkan SPA, dan melakukan prefetch hanya akan mengambil document yang tidak dapat digunakan client.

$panel->fullPageUrls('/admin/exports/*');

Lihat Full page URLs.

Memilih mode

• hover adalah default karena memberikan manfaat terbesar dengan biaya paling rendah: satu request hanya untuk link yang sedang dipertimbangkan user.
• mount cocok untuk Panel kecil ketika hampir setiap sidebar destination kemungkinan dibuka dan tambahan request saat page load masih murah. Pada Panel besar berarti satu request per visible navigation item untuk setiap page view.
• click memberi manfaat paling kecil sekaligus biaya paling kecil: fetch dimulai pada mousedown, sedikit lebih awal daripada click event.
• false cocok untuk Panel dengan Page mahal dirender atau jika prefetch dapat memicu side effect. GET route framework ini tidak menulis data, tetapi application middleware pada stack Panel bisa saja melakukannya — misalnya menulis "last seen" atau audit record.

Gotchas

• Prefetching berlaku per Panel, bukan per link. Tidak ada per-item override pada navigation model server; NavigationItem tidak memiliki field prefetch.
• Prefetch adalah request nyata. Request menjalankan stack middleware Panel, me-resolve Panel, melakukan authorization, dan merender Page. mount pada Panel dengan tiga puluh navigation item berarti tiga puluh render.
• prefetch(false) tidak sama dengan keadaan Panel tidak ada. Keduanya menjadi false pada frontend, tetapi hanya setting Panel yang disengaja; ?? false pada composable hanyalah guard saat navigasi keluar dari Panel.
• Setting ini tidak mengubah apa yang di-cache. Inertia memiliki prefetch cache dan lifetime-nya sendiri; Panel hanya menentukan kapan fetch dimulai.
• Menonaktifkan prefetch tidak menonaktifkan client-side navigation. Link tetap melakukan Inertia visit; fetch hanya dimulai saat click, bukan sebelumnya.

Lihat juga

• Full page URLs
• Sub navigation, Clusters
• Sidebar and header layouts
• Navigation groups
• Panel API reference
• Inertia and Vue approach
• Error notifications