From d348154eb4e9fb2ec195e7bea4b56f9fbc238b7d Mon Sep 17 00:00:00 2001
From: "Fred K. Schott" <fkschott@gmail.com>
Date: Fri, 25 Sep 2020 16:52:19 -0700
Subject: [PATCH] add docs

---
 docs/docs/04-features.md        | 12 ++++++++++++
 docs/plugins.md                 | 30 ++++++++++++++++++++++++++++++
 plugins/plugin-svelte/plugin.js |  2 +-
 3 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/docs/docs/04-features.md b/docs/docs/04-features.md
index 6a9cd05998..f5e8b72c3d 100644
--- a/docs/docs/04-features.md
+++ b/docs/docs/04-features.md
@@ -271,6 +271,18 @@ Snowpack supports [native CSS "@import" behavior](https://developer.mozilla.org/
 
 **Note for webpack users:** If you're migrating an existing app to snowpack, note that `@import '~package/...'` (URL starting with a tilde) is a syntax specific to webpack. With Snowpack you remove the `~` from your `@import`s.
 
+
+### Server Side Rendering (SSR)
+
+SSR for Snowpack is supported but fairly new and experimental. This section of our documentation will be updated as we finalize support over the next few versions.
+
+These frameworks have known experiments / examples of using SSR + Snowpack:
+
+- React (Example): https://github.com/matthoffner/snowpack-react-ssr
+- Svelte/Sapper (Experiment): https://github.com/Rich-Harris/snowpack-svelte-ssr
+- [Join our Discord](https://discord.gg/rS8SnRk) if you're interested in getting involved!
+
+
 ### Optimized Builds
 
 By default, Snowpack doesn't optimize your code for production. But, there are several plugins available to optimize your final build, including minification (reducing file sizes) and even bundling (combining files together to reduce the number of requests needed).
diff --git a/docs/plugins.md b/docs/plugins.md
index 58fc2737dc..7b7c79e229 100644
--- a/docs/plugins.md
+++ b/docs/plugins.md
@@ -188,6 +188,36 @@ In that case, the `resolve` property only takes a single `input` file type (`['.
 
 Notice that `.svelte` is missing from `resolve.output` and isn't returned by `load()`. Only the files returned by the `load()` method are included in the final build. If you wanted your plugin to keep the original source file in your final build, you could add `{ '.svelte': contents }` to the return object.
 
+### Server-Side Rendering (SSR)
+
+Plugins can produce server-optimized code for SSR via the `load()` plugin hook. The `isSSR` flag tells the plugin that Snowpack is requesting your file for the server, and that it will expect a response that will run on the server. 
+
+Some frameworks/languages (like React) run the same code on both the browser and the server. Others (like Svelte) will create different output for the server than the browser. In the example below, we use the `isSSR` flag to tell the Svelte compiler to generate server-optimized code when requested by Snowpack.
+
+```js
+const svelte = require('svelte/compiler');
+const fs = require('fs');
+
+module.exports = function (snowpackConfig, pluginOptions) {
+  return {
+    name: 'basic-svelte-plugin',
+    resolve: {
+      input: ['.svelte'],
+      output: ['.js', '.css'],
+    },
+    async load({filePath, isSSR}) {
+      const svelteOptions = { /* ... */ };
+      const codeToCompile = fs.readFileSync(filePath, 'utf-8');
+      const result = svelte.compile(codeToCompile, { ...svelteOptions, ssr: isSSR });
+      // ...
+    },
+  };
+};
+```
+
+If you're not sure if your plugin needs special SSR support, you are probably fine to skip this and ignore the `isSSR` flag in your plugin. Many languages won't need this, and SSR is always an intentional opt-in by the user.
+
+
 ### Optimizing & Bundling
 
 Snowpack supports pluggable bundlers and other build optimizations via the `optimize()` hook. This method runs after the build and gives plugins a chance to optimize the final build directory. Webpack, Rollup, and other build-only optimizations should use this hook.
diff --git a/plugins/plugin-svelte/plugin.js b/plugins/plugin-svelte/plugin.js
index 2573588acc..a67fbe035d 100644
--- a/plugins/plugin-svelte/plugin.js
+++ b/plugins/plugin-svelte/plugin.js
@@ -21,7 +21,6 @@ module.exports = function plugin(snowpackConfig, pluginOptions = {}) {
   // Generate svelte options from user provided config (if given)
   svelteOptions = {
     dev: process.env.NODE_ENV !== 'production',
-    hydratable: true,
     css: false,
     ...svelteOptions,
     ...pluginOptions,
@@ -48,6 +47,7 @@ module.exports = function plugin(snowpackConfig, pluginOptions = {}) {
       const ssrOptions = {};
       if (isSSR) {
         ssrOptions.generate = 'ssr';
+        ssrOptions.hydratable = true;
         ssrOptions.css = true;
       }