Prefetching

Preload pages before users navigate to them.

See also

Official Inertia.js docs: Prefetching

What Is Prefetching?

Prefetching proactively loads a page in the background, so navigation feels instant when the user clicks a link.

Link Prefetching

Enable prefetching on individual links:

React

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

<Link href="/reports" prefetch>
  Reports
</Link>

Vue

<template>
  <Link href="/reports" prefetch>Reports</Link>
</template>

Prefetching defaults to hover and caches responses for a short period. Choose when prefetching happens with prefetch and cacheFor:

React

<Link href="/reports" prefetch="mount" cacheFor={30}>
  Reports
</Link>

Vue

<template>
  <Link href="/reports" prefetch="mount" :cache-for="30">Reports</Link>
</template>

Programmatic Prefetching

Prefetch routes from code:

React

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

router.prefetch("/users", { cacheFor: 60 });

Vue

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

router.prefetch("/users", { cacheFor: 60 });

Backend Considerations

Prefetch requests hit your existing routes. Use partial reloads to limit payload size when prefetching large pages.

See Also

• Polling - Keep data fresh on a timer

• Partial Reloads - Tune prefetch payloads

• Remembering State - Preserve UI state