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