Início / coding / Perguntas / 79294098
Accepted
16ar
Asked: 2024-12-19 19:25:14 +0800 CST

Problema de hidratação ao carregar conteúdo HTML do lado do servidor

  • 772

Estou carregando conteúdo HTML de um repositório Supabase. Quando exibo o conteúdo sem a @htmltag, ele aparece (como texto simples), mas quando o encapsulo com {@html ...}nada é mostrado e recebo um hydration_html_changedaviso.

Uma coisa a destacar é que se eu apenas salvar o arquivo novamente, o conteúdo será exibido corretamente. Mas ao recarregar a página inteira, tenho o problema...

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

1 respostas

  1. Best Answer

    O problema parece estar no page.datafrom $app/stateque fica vazio durante o SSR.

    Como solução alternativa enquanto o problema é corrigido, você pode usar adereços regulares (o que eu também recomendaria em geral neste +pagenível):

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

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

relate perguntas