People searching “Inertia prefetch” put prefetch on every link, including ones that post. Prefetch sends a GET. Use it for a page the user is about to open.
TL;DR
- prefetch on a Link loads a GET page before the click.
- Do not prefetch a POST, a logout, or a page the user cannot open.
- Do not prefetch a logout URL.
- Do not prefetch a URL the policy will reject.
The fix#
<script setup lang="ts">
import { Link } from "@inertiajs/vue3";
</script>
<template>
<Link href="/posts" prefetch>Posts</Link>
</template>The default waits for a hover. The next click is faster because the response is already in memory. The pagination guide is the list this link usually opens. Prefetch does not change that page’s props.
What to avoid#
Gotcha
Do not prefetch a logout URL. Logout is a POST, and a GET prefetch would either fail or, worse, hit a route you mistakenly registered as GET. Do not prefetch a URL the policy will reject. You would be caching a 403 for a hover.
Do not prefetch a page that runs a write in its controller. A controller that writes on GET is already a bug. Prefetch makes it happen on hover.
FAQ#
How do I prefetch an Inertia link?
prefetch on a Link loads a GET page before the click. Do not prefetch a POST, a logout, or a page the user cannot open.
What goes wrong with Inertia prefetch?
Many developers put prefetch on every link, including ones that post. Do not prefetch a logout URL.
