better ssr (#97)

tko22 · web-flow · commit a935796fb21c · 2020-06-10T22:41:59.000-07:00
diff --git a/README.md b/README.md
@@ -39,6 +39,9 @@ export default App
 ### Theming
 Components use Hack4Impact's Design theme by default (`src/theme.js`) but you can provide your own theme using styled-component's [<ThemeProvider>](https://styled-components.com/docs/advanced). You can either fully replace the theme or replace parts of the theme by placing your custom theme through a prop to our components or through `<ThemeProvider>` in the root of the application.
 
+### Server-side Rendering
+
+This library depends on [styled-components](https://styled-components.com/). Thus, if you are server rendering React or using a framework like next.js or gatsby, follow styled-component's [server rendering setup](https://styled-components.com/docs/advanced#server-side-rendering).
 
 ## Local Development
 We use Storybook to hot-reload and test our components during development. You can edit the [`playground/Playground.js`](playground/Playground.js) file to import and test the components you are working on. Please do not commit any work on the file so other developers can use the same file to test.
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
@@ -1,8 +1,34 @@
 import Document, {
   Html, Head, Main, NextScript,
 } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
 
 class DocSite extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () => originalRenderPage({
+        enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
+      });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+
   render() {
     return (
       <Html lang="en">
diff --git a/docs/pages/components/index.mdx b/docs/pages/components/index.mdx
@@ -43,6 +43,10 @@ export default App
 #### Theming
 Components use Hack4Impact's Design theme by default (`src/theme.js`) but you can provide your own theme using styled-component's [ThemeProvider](https://styled-components.com/docs/advanced). You can either fully replace the theme or replace parts of the theme by placing your custom theme through a prop to our components or through `<ThemeProvider>` in the root of the application.
 
+#### Server-side Rendering
+
+This library depends on [styled-components](https://styled-components.com/). Thus, if you are server rendering React or using a framework like next.js or gatsby, follow styled-component's [server rendering setup](https://styled-components.com/docs/advanced#server-side-rendering).
+
 ### Local Development
 We use Storybook to hot-reload and test our components during development. You can edit the `playground/Playground.js` file to import and test the components you are working on. Please do not commit any work on the file so other developers can use the same file to test.
 
