document hydration

content/guide/13-advanced.md

@@ -68,4 +68,46 @@ It's easier to show the effect of this than to describe it. Open the following e
 		transitions: { slide }
 	};
 </script>
-```
+```
+
+
+### Hydration
+
+If you're using [server-side rendering](#server-side-rendering), it's likely that you'll need to create a client-side version of your app *on top of* the server-rendered version. A naive way to do that would involve removing all the existing DOM and rendering the client-side app in its place:
+
+```js
+import App from './App.html';
+
+const target = document.querySelector('#element-with-server-rendered-html');
+
+// avoid doing this!
+target.innerHTML = '';
+new App({
+	target
+});
+```
+
+Ideally, we want to reuse the existing DOM instead. This process is called *hydration*. First, we need to tell the compiler to include the code necessary for hydration to work by passing the `hydratable: true` option:
+
+```js
+const { code } = svelte.compile(source, {
+	hydratable: true
+});
+```
+
+(Most likely, you'll be passing this option to [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte) or [svelte-loader](https://github.com/sveltejs/svelte-loader).)
+
+Then, when we instantiate the client-side component, we tell it to use the existing DOM with `hydrate: true`:
+
+```js
+import App from './App.html';
+
+const target = document.querySelector('#element-with-server-rendered-html');
+
+new App({
+	target,
+	hydrate: true
+});
+```
+
+> It doesn't matter if the client-side app doesn't perfectly match the server-rendered HTML — Svelte will repair the DOM as it goes.