[2.x] Prefetch should flush its cache after navigating

[mnapoli]

Versions:

I'm on @inertiajs/vue3 but I guess this applies to all versions.

Describe the problem:

I've upgraded to v2 beta and started using prefetch in multiple places, one example is the website navigation bar. I love this feature btw.

I quickly realized an issue: prefetching will keep pages cached in memory and serve them even after navigating away. This causes side effects like:

• switching team (e.g. with Laravel Jetstream) causes to display pages from another team
• stale data is shown after POST [2.x] Prefetch causes stale data to be shown after post #2017
• more generally, it heavily increases the chances of stale data being displayed

I 100% appreciate that this behavior can be worked around by setting a lower cache duration, and it's documented. But I'm trying to argue here that the duration is not the issue, and the behavior is unexpected and will cause issues across many users (who may skim the docs like me).

I think the problem boils down to:

• prefetching should be about prefetching links just before they are clicked (in order to speed up the next page load only)
• what is currently implemented is actually prefetching + global page cache

And I think this is the misleading part: the "prefetching" feature comes with more than it should (global page cache).

I would love to start the discussion around making prefetching dumber: the cache should be flushed after an page change/navigation.

A global page cache could exist, but I think it should exist as a different feature, to avoid any confusion and mistakes.

Steps to reproduce:

Example with Laravel Jetstream:

• Visit / (as Team 1)
• Hover navbar links (that use prefetch)
• Switch to a different team (Team 2)
• Click a navbar link
• Expected: data from Team 2
• Actual: data from Team 1

[jaspertey]

Would the following be a solution in the meantime?

// Within the main app layout
import { router } from '@inertiajs/vue3';

router.on('navigate', (event) => {
  router.flushAll();

  // or inspect event.detail.page and flush conditionally
});

I'm just thinking out loud here and adding to the discussion, I haven't actually tried it myself yet.

[mnapoli]

Oh that's a good idea for a workaround!

I want to insist I consider this a major issue in the prefetch feature (and I highly appreciate the effort in Inertia 2 and this feature too, not trying to bring people down just trying to give this more attention ❤️). I'm afraid this is the kind of problem you don't see at first, and it comes biting you back after a few weeks or months. I hope I'm wrong but I'm afraid we'll see more and more people +1 this issue as time goes on.