Assume we have a web page with the HTML lang attribute set dynamically based on the Accept-language header of the request. The body of the page is also language-specific. What I came up with:
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
Where Page.svelte is:
<script>
export let html
export let language
</script>
<!DOCTYPE html>
<html lang="{ language }">
<body>
{ @html html }
</body>
</html>
Everything works fine. But now I'd like to have the page interact. I use the Body.svelte in the App and set hydrate option:
const app = new App({
target: document.body,
hydrate: true
})
Without this option set the content is rendered twice. With the option set we have an error in the browser:
Uncaught Error: options.hydrate only works if the component was compiled with the `hydratable: true` option
We can pass options to the compiler, according to the documentation:
require('svelte/register')({ hydratable: true })
It says:
hydratable: trueadds a marker to each element in the <head> so that the component knows which elements it's responsible for removing during hydration
But I observe no markers. It has no effect on client-side rendering, and the error remains.
Am I missing something?