Hydration mismatch not reconciling properly #14909

pjebs · 2025-01-06T10:51:45Z

Describe the bug

For the purposes of explaining the bug:

Let's say my index.html contains this:

<html>
  <body>
    <div id="app">
    SAMPLE BODY
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Let's say svelte will manage the app div on the client.

import { mount } from 'svelte'
import AppWrapper from './AppWrapper.svelte'

const app = mount(AppWrapper, {
  target: document.getElementById('app')!,
})

export default app

I am trying to do SSR for Svelte on a non-JS programming language server. This is quite challenging.
My solution is kick-start a JS runtime on my server (eg. v8).
Run the Svelte code in the server's JS runtime.
Parse the rendered html output and copy the entire DOM structure within the app div tag. (NB: "SAMPLE BODY" text was just an example, not the real rendered html output. Also that text was not in the index.html file passed to the JS runtime!)
When it's time to serve the actual html file and svelte-generated js file, I replace the contents within the app div tag with the html from step 4.
CSR happens.
For me, the client-side rendering is the "source-of-truth" and should always be preferred because it is official and not hacky.

The BUG

For some reason, svelte appends the client-side rendered DOM inside the app tag instead of replacing it. (i.e. for the example at the top, it will say "SAMPLE BODY" AND THEN the acual client-side rendered DOM. (Note: React replaces instead of appends)
There is also NO hydration_mismatch errors on the console.

Extra Issue in Documentation:

There are 3 relevant errors:

The docs state a "hacky" way to force a client-side update:

<script>
	let { markup } = $props();

	if (typeof window !== 'undefined') {
		// stash the value...
		const initial = markup;

		// unset it...
		markup = undefined;

		$effect(() => {
			// ...and reset after we've mounted
			markup = initial;
		});
	}
</script>

{@html markup}

Proposal 1
I propose that there is an option added to the compiler to ALWAYS PREFER CLIENT SIDE RENDERING for scenarios such as mine.

Proposal 2

In the docs, it should clearly state EXACTLY which attributes the below applies to (i.e. what else other than src?)

hydration_attribute_changed:

Certain attributes like src on an element will not be repaired during hydration, i.e. the server value will be kept.

hydration_html_changed:

If the {@html ...} value changes between the server and the client, it will not be repaired during hydration, i.e. the server value will be kept.

Reproduction

N/A (requires code from another programming language)

Logs

No response

System Info

Latest version of Svelte

Severity

blocking all usage of svelte

Thanks @tanhauhau for your video on hydration.

The text was updated successfully, but these errors were encountered:

paoloricciuti · 2025-01-06T11:07:05Z

You should use hydrate rather than mount

pjebs · 2025-01-06T11:12:11Z

@paoloricciuti That seemed to work.

Q1. mount was from the template code that came from svelte's getting started CLI generator. Perhaps the template should be replaced with hydrate.
Q2 Why does mount append. Should it just spit out an error in my scenario?
Q3 Even after changing to hydrate, I still didn't get a hydration_mismatch error in the console when clearly there is a mismatch.

paoloricciuti · 2025-01-06T11:20:32Z

I think the CLI generator assume that you will have no content of your own and just an empty div. In that case mount is correct because there's no html to hydrate. This is also why I don't think it should spit out an error...mount "adds" to the element without even looking at the content and I think it's fair (let's say you want to mount multiple independent components to the same div).

Why are you expecting an hydration mismatch? From what I understood you are generating the correct html on the server (p.s. a reproduction is appreciated even if it includes a different programming language)

pjebs · 2025-01-06T11:25:14Z

I'm not generating the correct html (just an approximate) because I haven't quite solved how to generate the EXACT DOM on the server. Even when I replace it with text "SAMPLE BODY", there is still not hydration mismatch error.

paoloricciuti · 2025-01-06T11:27:30Z

I'm not generating the correct html (just an approximate) because I haven't quite solved how to generate the EXACT DOM on the server. Even when I replace it with text "SAMPLE BODY", there is still not hydration mismatch error.

Then we absolutely need a reproduction for this, at very minimum you should provide the generated html and how you are actually using it

pjebs · 2025-01-06T11:34:34Z

@paoloricciuti I'll create a sample project tomr. Almost midnight here.
What do you think of my proposals above? Do they have merit?

paoloricciuti · 2025-01-06T12:44:25Z

@paoloricciuti I'll create a sample project tomr. Almost midnight here. What do you think of my proposals above? Do they have merit?

I think we can clearly state which attributes (even tho you already get the warning)...as per "always preferring client side" I think this is a very niche use and I can't recall on the top of my head the amount of code we would need to unlock that but I suspect is not minimal.

pjebs · 2025-01-06T22:37:48Z

Here is instructions on how to reproduce

npm create vite@latest
Select Svelte -> Typescript
Run npm install

Change index.html to add "SAMPLE BODY":

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Svelte + TS</title>
  </head>
  <body>
    <div id="app">SAMPLE BODY</div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Update main.ts to switch from mount to hydrate.
Run npm run dev
Open browser and observe console. There is no hydration_mismatch error. The UI updates properly however.

pjebs · 2025-01-07T00:06:03Z

@tanhauhau I know you've worked on the hydration code.
How hard is it set svelte to ALWAYS PREFER CLIENT SIDE RENDERING when there is a hydration_mismatch?

paoloricciuti · 2025-01-07T20:22:50Z

Ok i took a look, that is simply because by default hydrate falls back to mount after clearing the content of the div if it immediately encounter an hydration error.

pjebs · 2025-01-07T21:48:29Z

Why am I not notified of the hydration error? Isn't that the point of hydration_mismatch error.

paoloricciuti · 2025-01-07T22:39:41Z

Why am I not notified of the hydration error? Isn't that the point of hydration_mismatch error.

The error is there to show you when there's an hydration mismatch but if svelte can "correct that" it falls back to removing the server content and just mounting the component

pjebs · 2025-01-08T01:47:20Z

So essentially it is ALWAYS PREFER CLIENT SIDE RENDERING???
Or if not, what are the conditions in which it prefers client side rendering?
What are the conditions for svelte to be to "correct that".

pjebs mentioned this issue Jan 6, 2025

Deployment plentico/plenti#352

Closed

paoloricciuti added the awaiting submitter needs a reproduction, or clarification label Jan 6, 2025

paoloricciuti removed the awaiting submitter needs a reproduction, or clarification label Jan 7, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hydration mismatch not reconciling properly #14909

Hydration mismatch not reconciling properly #14909

pjebs commented Jan 6, 2025 •

edited

Loading

paoloricciuti commented Jan 6, 2025

pjebs commented Jan 6, 2025

paoloricciuti commented Jan 6, 2025

pjebs commented Jan 6, 2025

paoloricciuti commented Jan 6, 2025

pjebs commented Jan 6, 2025

paoloricciuti commented Jan 6, 2025

pjebs commented Jan 6, 2025

pjebs commented Jan 7, 2025

paoloricciuti commented Jan 7, 2025

pjebs commented Jan 7, 2025 •

edited

Loading

paoloricciuti commented Jan 7, 2025

pjebs commented Jan 8, 2025 •

edited

Loading

Hydration mismatch not reconciling properly #14909

Hydration mismatch not reconciling properly #14909

Comments

pjebs commented Jan 6, 2025 • edited Loading

Describe the bug

The BUG

Extra Issue in Documentation:

Reproduction

Logs

System Info

Severity

paoloricciuti commented Jan 6, 2025

pjebs commented Jan 6, 2025

paoloricciuti commented Jan 6, 2025

pjebs commented Jan 6, 2025

paoloricciuti commented Jan 6, 2025

pjebs commented Jan 6, 2025

paoloricciuti commented Jan 6, 2025

pjebs commented Jan 6, 2025

pjebs commented Jan 7, 2025

paoloricciuti commented Jan 7, 2025

pjebs commented Jan 7, 2025 • edited Loading

paoloricciuti commented Jan 7, 2025

pjebs commented Jan 8, 2025 • edited Loading

pjebs commented Jan 6, 2025 •

edited

Loading

pjebs commented Jan 7, 2025 •

edited

Loading

pjebs commented Jan 8, 2025 •

edited

Loading