2

假设我们有一个网页，其 HTMLlang属性根据Accept-language请求的标头动态设置。页面的正文也是特定于语言的。我想出了什么：

require('svelte/register')

// Render the body
const Body = require('./Body.svelte').default
const body = Body.render({ language })

// Render the entire page
const Page = require('./Page.svelte').default
const page = Page.render(Object.assign(body, { language })

// Send page.html to the client

在哪里Page.svelte：

<script>
  export let html
  export let language
</script>

<!DOCTYPE html>
<html lang="{ language }">
<body>
  { @html html }
</body>
</html>

一切正常。但现在我想让页面交互。我Body.svelte在 App 中使用并设置hydrate选项：

const app = new App({
  target: document.body,
  hydrate: true
})

如果不设置此选项，内容将呈现两次。使用选项集，我们在浏览器中出现错误：

Uncaught Error: options.hydrate only works if the component was compiled with the `hydratable: true` option

根据文档，我们可以将选项传递给编译器：

require('svelte/register')({ hydratable: true })

它说：

hydratable: true为 <head> 中的每个元素添加一个标记，以便组件知道它负责在水合期间删除哪些元素

但我没有观察到任何标记。它对客户端渲染没有影响，并且错误仍然存​​在。

我错过了什么吗？

4

0 回答 0