feat: ignore href when hydrating #9662
Merged
+39
−22
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: fb6c2b8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
Closed
|
Agree with the reasoning 👍 |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Merged
dummdidumm
added a commit
that referenced
this pull request
Aug 26, 2024
The reasoning in #9662 turns out to be false: While it's true that the href would resolve to the same URL on the initial page, once you're doing a client-side navigation to a URL at a different depth, the relative path would now point to the wrong location. Therefore we need to repair href hydration mismatches fixes sveltejs/kit#12254
5 tasks
dummdidumm
added a commit
that referenced
this pull request
Aug 26, 2024
The reasoning in #9662 turns out to be false: While it's true that the href would resolve to the same URL on the initial page, once you're doing a client-side navigation to a URL at a different depth, the relative path would now point to the wrong location. Therefore we need to repair href hydration mismatches fixes sveltejs/kit#12254
Rich-Harris
added a commit
that referenced
this pull request
Aug 26, 2024
* fix: repair `href` attribute mismatches The reasoning in #9662 turns out to be false: While it's true that the href would resolve to the same URL on the initial page, once you're doing a client-side navigation to a URL at a different depth, the relative path would now point to the wrong location. Therefore we need to repair href hydration mismatches fixes sveltejs/kit#12254 * remove test * Revert "remove test" This reverts commit fa43304. * fix test * remove comment, since the rationale for skipping the attributes in question is covered by the one immediately below * fix * add test for <a> specifically --------- Co-authored-by: Rich Harris <rich.harris@vercel.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Putting this up for discussion. Currently, a SvelteKit app will often render HTML with relative paths, which are replaced with absolute paths upon hydration. (This behaviour is intentional — it means that the HTML is more portable and resilient, for example if it ends up on the Internet Archive or on IPFS. It will likely be the default for all base-relative paths in SvelteKit 2.0.)
The cost is that something like
<a href="{paths.base}/whatever">will differ between SSR and CSR:<a href="../whatever"><a href="https://example.com/foo/bar/whatever">As a result, Svelte updates the attribute during hydration, even though it resolves to the same URL.
For
srcandsrcsetattributes, we always skip hydration, on the assumption that the resolved value will be unchanged. (In dev, we check that this is in fact the case.) We could do the same thing forhref. The stakes are lower — whereas updatingsrccan cause unnecessary network requests, or cause iframes to be reloaded, this is only about avoiding unnecessary work — but it's probably worthwhile anyway.Before submitting the PR, please make sure you do the following
feat:,fix:,chore:, ordocs:.Tests and linting
pnpm testand lint the project withpnpm lint