svelte:head updates prematurely in async mode

[agillispie]

Describe the bug

I have a page where you can contact other users. The route is /contact/[id] the +page.server.ts file for that page retrieves the user information you are trying to contact from the DB and returns it via load. Then the svelte head is set on that page to display a title of Contact <name> and also displays the info of the person you are contacting. The links to reach these pages are just simple anchor tags.

The issue I am facing is that just hovering over the anchor tag the data is preloaded and updates the page title and any other head content before clicking on the anchor. Also, clicking on the anchor tag ends up causing the app to crash or freeze. Once you reload the page, the previous clicks are added into the window history.

Reproduction

Github Repo

Logs

no logs are displayed

System Info

System:
    OS: macOS 26.0
    CPU: (10) arm64 Apple M4
    Memory: 137.41 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.1 - /Users/agill/.nvm/versions/node/v22.13.1/bin/node
    npm: 11.2.0 - /Users/agill/.nvm/versions/node/v22.13.1/bin/npm
    pnpm: 10.20.0 - /Users/agill/.nvm/versions/node/v22.13.1/bin/pnpm
    bun: 1.2.21 - /Users/agill/.bun/bin/bun
  Browsers:
    Chrome: 142.0.7444.60
    Safari: 26.0
  npmPackages:
    @sveltejs/adapter-auto: ^7.0.0 => 7.0.0 
    @sveltejs/kit: ^2.47.1 => 2.48.4 
    @sveltejs/vite-plugin-svelte: ^6.2.1 => 6.2.1 
    svelte: ^5.41.0 => 5.43.3 
    vite: ^7.1.10 => 7.1.12

Severity

annoyance

Additional Information

No response

[sillvva]

Working version: 5.41.4 (pinned version)
https://stackblitz.com/edit/sveltejs-kit-template-default-jg7qxtgw?file=package.json,src%2Froutes%2F%2Bpage.svelte

Broken Version: 5.42.0 → 5.43.5
https://stackblitz.com/edit/sveltejs-kit-template-default-jp3umkft?file=package.json,src%2Froutes%2F%2Bpage.svelte

The only difference between these two examples is the svelte version. This is a svelte bug, not a kit bug.

Couple of bugs spotted:

• Noticed: Page title updates on link hover, but only the first link hovered.
  Expected: It should not update on hover at all.
• Noticed: Hovering one link (ex. Jim), and then clicking another link (ex. Alan), the linked page does not load.
  Expected: The page should load.

Use Open Preview in new tab button to see the <title> update:

[agillispie]

Working version: 5.41.4 (pinned version)
https://stackblitz.com/edit/sveltejs-kit-template-default-jg7qxtgw?file=package.json,src%2Froutes%2F%2Bpage.svelte

Broken Version: 5.42.0 → 5.43.3
https://stackblitz.com/edit/sveltejs-kit-template-default-jp3umkft?file=package.json,src%2Froutes%2F%2Bpage.svelte

The only difference between these two examples is the svelte version. This is a svelte bug, not a kit bug.

Couple of bugs spotted:

• Noticed: Page title updates on link hover, but only the first link hovered.
  Expected: It should not update on hover at all.
• Noticed: Hovering one link (ex. Jim), and then clicking another link (ex. Alan), the linked page does not load.
  Expected: The page should load.

Use Open Preview in new tab button to see the <title> update:

Can someone transfer this over to the svelte repo?

[Trifall]

Getting this issue as well on svelte version 5.43.2 and still on 5.43.4 when using the experimental.async option. This seems related to #17060 or #14827 possibly.

Example:

Anchor on primary page that links to an admin dashboard

say (main)/+page.svelte

<a
	href={resolve('/(main)/(landing)/admin/dashboard')}
	class="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-primary"
	title="Dashboard"
>
	<LayoutDashboardIcon class="h-5 w-5" />
</a>

The (main)/(landing)/admin/dashboard/+page.svelte file at the corresponding route which has svelte:head content of:

<svelte:head>
	<title>Admin - Dashboard</title>
</svelte:head>

It seemingly works as expected on my project, in the sense that the page title does NOT change before navigation.

If, however, you do something like:

<svelte:head>
	<title>Admin - Dashboard - {getSiteName()}</title>
</svelte:head>

it incorrectly updates the page title on hover when calling the function, which in this case could be something like a simple string return e.g.

export const getSiteName = () => {
	return env.PUBLIC_SITE_NAME ??  'Example';
};

Also, even if you don't call a function, but reference a variable instead such as:

<svelte:head>
	<title>Admin - Dashboard - {SITE_NAME}</title>
</svelte:head>

where SITE_NAME is defined as

export const SITE_NAME = env.PUBLIC_SITE_NAME ??  'Example';

seems to alter this behavior to induce the same premature svelte:head title update. In my project, when using the externally referenced variable or function, it then incorrectly updates the page title, but if its a plain string it correctly does not update the title.

As @sillvva and @acoyfellow discussed in sveltejs/kit#14827 (comment), the problem goes entirely away when downgrading to pre-5.42.0 (in this case 5.41.4).