[v2.x] Problem with Inertia::defer() and encryptHistory() upon <Link> visits

[TymoteuszNachtman]

Version:

• @inertiajs/vue3 version: 2.0.0-beta.2

The problem:

When using for Inertia visits if the route props are deferred Inertia makes second 'get' request to previous route instead of the new one. As stated in Inertia docs the callback shoud

be executed in a separate request AFTER the initial page render.

so it does load the new page but redirects back to previous route, or to be more specific - displays previous route (that was rendered). It happens with Inertia Links and Inertia manual visits like router.visit().

Example:

• I'm on /dashboard route
• Clicking on <Link> with :href="route('users')"
• Users page loads showing Loading... title from Deferred fallback
• Inertia redirects back to /dashboard (or any previous route that was before clicking Link tag)

It doesn't happen on raw url requests (pasting url) or when using <a> tags. For example when going to my-domain.com/users it renders Loading... and then shows the data

Users.vue (fragment)

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

      <div>{{ users }}</div>
 </Deferred>

Laravel route:

return Inertia::render('Users', [
    'users' => Inertia::defer(fn() => [
      'firstname' => 'TEST' // Just for testing purposes returns plain data 
    ]),
  ]);

Edit:

I discovered this has to do with placing \Inertia\EncryptHistoryMiddleware::class in the app.php withMiddleware for all routes. After some debugging I found using encrypt middleware on a route with deferred props causes the redirect problem.

[TymoteuszNachtman]

@joetannenbaum Great PR! Works like a charm ✨ Thank you! 💪