htmlsveltesveltekithydration

Hydration issue when server-side loading HTML content

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>
```
Solution

  • 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>