fix: improve hydration of svelte head blocks

[trueadm]

Fixes #11092

[changeset-bot]

🦋 Changeset detected

Latest commit: 1e19135

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[dummdidumm]

Arguably an edge case, but what if a component is rendered on the server but not on the client, and it contains svelte:head? Then the wrong head would be used for hydration. I think we need to add a number to each head anchor to know which ones to ignore. It should be enough to check for anchor of number n and remove all previously encountered anchor pairs (and everything inbetween) that weren't hydrated.

I'll explore this approach.

[dummdidumm]

Thinking about it more - I don't currently see how we can reliably identify a marker between client and server.

• using a number that just increments doesn't help, how should we know that number 1 on the client is for the same head as for 1 on the server?
• using a hash calculated from the component doesn't help, because the same component could be used multiple times (think of a reusable head component)
• random numbers don't work because client and server variants are not created in the same step

Almost feels like we need a general-purpose "create a unique id that is stable across client and server" mechanism for this (something from which users probably also benefit).

[trueadm]

Arguably an edge case, but what if a component is rendered on the server but not on the client, and it contains svelte:head? Then the wrong head would be used for hydration.

How does Svelte 4 deal with this? I have a way of dealing with it, but easiest to speak about it in a call first.

[dummdidumm]

I haven't tested, but Svelte 4 basically clears each mismatch separately and recreates the nodes from scratch.

[trueadm]

@dummdidumm What if there are no mismatches but there's still additional content in the head that is wrong? i.e. you have an each block that renders to the head in each row, but the server renders 5 items and the client renders 4?