<Link> prefetching behavior

[yousefelgoharyx]

Goals

1. Prefetching only when it's safe to do so

Non-Goals

No response

Background

I'm working on a project using Next 14 and app router. We have a route for logging users out. This route just deletes some cookies then redirects the user to another page.

The route exists in the app directory and the folder logout only has route.ts as shown down

Now the only missing piece is having a component that goes to /logout as shown down

The problem is that Next will prefetch /logout if we don't pass prefetch={false}. This is really unsafe and in our case it leads to the user being signed out the moment he logs in to their account.

Proposal

I haven't really thought of anything to solve this DX experience but an ideal solution would be that Next only prefetches routes that actually serve some content
since pages in app router are not allowed to set or delete cookies, it's safe to prefetch only routes that actually serve some content

[icyJoseph]

What happens when the user clicks on the link? Maybe you should switch it to a regular a tag. Anyhow, I think a form that gets submitted to /auth/logout, when a link/button is clicked is probably better for this use case.

[yousefelgoharyx]

Hmmm I usually use forms to mutate data on the server. So using a form to logout the current user seems a bit odd to me I don't know if it's ok to do so

However, my point is that Next prefetches routes arbitrary and that could be unsafe in many cases such as my case

[icyJoseph]

Isn't changing the logged in state a mutation?

And sure, a form is iffy, but one could also make the case that GET requests ought to be idempotent, AKA a query should turn into a command.

[augustl]

How does Next actually handle prefetching for "dynamic" routes like this? Does it just invoke the entire route, including calls to cookie().delete(...) etc, when there's no loading.tsx?

[sabeerbikba]

Goals

1. Prefetching only when it's safe to do so

Non-Goals

No response

Background

I'm working on a project using Next 14 and app router. We have a route for logging users out. This route just deletes some cookies then redirects the user to another page.

The route exists in the app directory and the folder logout only has route.ts as shown down

Now the only missing piece is having a component that goes to /logout as shown down

The problem is that Next will prefetch /logout if we don't pass prefetch={false}. This is really unsafe and in our case it leads to the user being signed out the moment he logs in to their account.

Proposal

I haven't really thought of anything to solve this DX experience but an ideal solution would be that Next only prefetches routes that actually serve some content since pages in app router are not allowed to set or delete cookies, it's safe to prefetch only routes that actually serve some content

Try using html anchor tag:

<a href="/auth/logout">{t("logout")}</a>

[CoderDeltaLAN]

Context

• Next.js App Router
• <Link /> prefetch causes unintended requests (e.g. /logout)
• You want to control or disable prefetch safely

Why
<Link /> prefetches when it enters the viewport (prod only). This is by design to speed up navigations. However, prefetching should not trigger side-effects. If a route performs effects on GET (like logging out), that’s the root problem: side-effects must live behind POST/route actions, not GET.

Fix (minimum viable)

1. Disable prefetch per link when needed:

   <Link href="/logout" prefetch={false}>Logout</Link>

2. Guard the route against GET side-effects:
   • For logout, use a POST Route Handler or a Server Action, then redirect.

   // app/logout/route.ts
   import { NextResponse } from 'next/server';
   export async function POST() {
     // clear cookies/session here (server-only)
     return NextResponse.redirect(new URL('/', process.env.NEXT_PUBLIC_BASE_URL));
   }

   And call it from a client button:

   'use client'
   async function onLogout() {
     await fetch('/logout', { method: 'POST' });
     window.location.href = '/';
   }

3. Global prefetch control (opt-out where appropriate):
   • Prefer disabling prefetch only on links with side-effects.
   • For lists with many links, consider virtualization or set prefetch={false} on those items to reduce background traffic.

Notes

• Docs: Link prefetching (production-only, viewport-based): https://nextjs.org/docs/app/api-reference/components/link
• Good practice: routes that change state should require POST; GET should be safe/idempotent.

If this helps, please Mark as answer so others can find it.