Add rehydration to example/aphrodite (vercel#1858)

Grokling · timneutkens · commit 7c8d0246e2f9 · 2017-05-10T00:33:39.000+02:00
* Add rehydration to example/aphrodite

* linting

* replaced yarn.lock
diff --git a/examples/with-aphrodite/pages/_document.js b/examples/with-aphrodite/pages/_document.js
@@ -4,15 +4,31 @@ import { StyleSheetServer } from 'aphrodite'
 export default class MyDocument extends Document {
   static async getInitialProps ({ renderPage }) {
     const { html, css } = StyleSheetServer.renderStatic(() => renderPage())
-    return { ...html, css }
+    const ids = css.renderedClassNames
+    return { ...html, css, ids }
+  }
+
+  constructor (props) {
+    super(props)
+    /* Take the renderedClassNames from aphrodite (as generated
+    in getInitialProps) and assign them to __NEXT_DATA__ so that they
+    are accessible to the client for rehydration. */
+    const { __NEXT_DATA__, ids } = props
+    if (ids) {
+      __NEXT_DATA__.ids = this.props.ids
+    }
   }
 
   render () {
+    /* Make sure to use data-aphrodite attribute in the style tag here
+    so that aphrodite knows which style tag it's in control of when
+    the client goes to render styles. If you don't you'll get a second
+    <style> tag */
     return (
       <html>
         <Head>
           <title>My page</title>
-          <style dangerouslySetInnerHTML={{ __html: this.props.css.content }} />
+          <style data-aphrodite dangerouslySetInnerHTML={{ __html: this.props.css.content }} />
         </Head>
         <body>
           <Main />
diff --git a/examples/with-aphrodite/pages/index.js b/examples/with-aphrodite/pages/index.js
@@ -1,6 +1,13 @@
 import React from 'react'
 import { StyleSheet, css } from 'aphrodite'
 
+if (typeof window !== 'undefined') {
+  /* StyleSheet.rehydrate takes an array of rendered classnames,
+  and ensures that the client side render doesn't generate
+  duplicate style definitions in the <style data-aphrodite> tag */
+  StyleSheet.rehydrate(window.__NEXT_DATA__.ids)
+}
+
 export default () => (
   <div className={css(styles.root)}>
     <h1 className={css(styles.title)}>My page</h1>
diff --git a/yarn.lock b/yarn.lock
