服务器端加载 HTML 内容时的水合作用问题

Question

我正在从 Supabase 存储库加载 HTML 内容。当我显示没有

@html

标签的内容时，它会显示（作为纯文本），但是当我用

{@html ...}

封装它时，不会显示任何内容，并且会收到

hydration_html_changed

警告。

需要指出的一件事是，如果我只是重新保存文件，内容就会正确显示。但在整个页面重新加载后，我遇到了问题......

<!-- +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>
```

Answer 1

问题似乎出在

page.data

中的

$app/state

，它在 SSR 期间为空。

作为解决问题的方法，您可以使用常规道具（我通常也会在

+page

级别推荐）：

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

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