fix(styled-components): call sheet.seal() to avoid memory leaks

mydearxym · mydearxym · commit 9057e90a24d0 · 2019-01-25T08:52:21.000+08:00
see vercel/next.js#6107
diff --git a/pages/_document.js b/pages/_document.js
@@ -3,22 +3,27 @@ import { ServerStyleSheet } from 'styled-components'
 
 /* eslint-disable */
 export default class MyDocument extends Document {
-  static getInitialProps({ renderPage }) {
+  static async getInitialProps(ctx) {
     const sheet = new ServerStyleSheet()
-    const page = renderPage(App => props =>
-      sheet.collectStyles(<App {...props} />)
-    )
-    const styleTags = sheet.getStyleElement()
-    return { ...page, styleTags }
+    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() {
-    /*
-       const sheet = new ServerStyleSheet()
-       const main = sheet.collectStyles(<Main />)
-       const styleTags = sheet.getStyleElement()
-     */
-
     return (
       <html>
         <Head>
