Hydration issue when server-side loading HTML content

Question

I am loading HTML content from a Supabase repo. When I display the content without the @html tag it shows (as plain text), but when I encapsulate it with {@html ...} nothing is shown and I get a hydration_html_changed warning.

One thing to point out is if I just resave the file then the content shows correctly. But upon full page reload I get the issue...

<!-- +page.svelte -->
<script>
    import { page } from '$app/state';
    console.log(page.data.personalMessage); // Logs content correctly
</script>

<h2>Hey !</h2>
<div>
    <!-- Displays HTML content as plain text -->
    {page.data.personalMessage}

    <!-- Nothing shows + hydration_html_changed warning -->
    {@html page.data.personalMessage}
</div>
```

This sounds like it might be a bug. If you have an HTML string that consistently causes the hydration error, you might want to open an issue. Check if maybe some issue already matches your case, e.g. this one mentions comments in the HTML. — brunnerh
– brunnerh, Commented Dec 19, 2024 at 12:02
Thx, issue is here : github.com/sveltejs/svelte/issues/14769 — 16ar
– 16ar, Commented Dec 19, 2024 at 13:06

brunnerh · Accepted Answer · 2024-12-19 13:53:43Z

1

The issue appears to be with the page.data from $app/state which is empty during SSR.

As a workaround while the problem gets fixed, you can use regular props (which I also would recommend in general at the +page level):

<script>
  const { data } = $props();
</script>

<div>
  {@html data.personalMessage}
</div>

answered Dec 19, 2024 at 13:53

brunnerh

188k30 gold badges363 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

16ar Over a year ago

Thx, That is indeed what I was looking for but I'm happy if I discovered a bug...

Collectives™ on Stack Overflow

Hydration issue when server-side loading HTML content

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related