async-labs
diff --git a/‎book/1-end/pages/_document.jsx‎
Lines changed: 12 additions & 47 deletions b/‎book/1-end/pages/_document.jsx‎
Lines changed: 12 additions & 47 deletions
@@ -1,10 +1,17 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
+import PropTypes from 'prop-types';
 
 import createEmotionServer from '@emotion/server/create-instance';
 import createCache from '@emotion/cache';
 
+const propTypes = {
+ styles: PropTypes.arrayOf(
+ PropTypes.string || PropTypes.number || PropTypes.ReactElementLike || React.ReactFragment,
+ ).isRequired,
+};
+
 class MyDocument extends Document {
  static getInitialProps = async (ctx) => {
  // Render app and page and get the context of the page with collected side effects.
@@ -27,8 +34,9 @@ class MyDocument extends Document {
  const initialProps = await Document.getInitialProps(ctx);
  // This is important. It prevents emotion to render invalid HTML.
  // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153
- const emotionStyles = extractCriticalToChunks(initialProps.html);
- const emotionStyleTags = emotionStyles.styles.map((style) => (
+ const chunks = extractCriticalToChunks(initialProps.html);
+
+ const emotionStyleTags = chunks.styles.map((style) => (
  <style
  data-emotion={`${style.key} ${style.ids.join(' ')}`}
  key={style.key}
@@ -96,6 +104,7 @@ class MyDocument extends Document {
  }
  `}
  </style>
+ {this.props.styles}
  </Head>
  <body>
  <Main />
@@ -106,50 +115,6 @@ class MyDocument extends Document {
  }
 }
 
-// MyDocument.getInitialProps = async (ctx) => {
-// // Resolution order
-// //
-// // On the server:
-// // 1. app.getInitialProps
-// // 2. page.getInitialProps
-// // 3. document.getInitialProps
-// // 4. app.render
-// // 5. page.render
-// // 6. document.render
-// //
-// // On the server with error:
-// // 1. document.getInitialProps
-// // 2. app.render
-// // 3. page.render
-// // 4. document.render
-// //
-// // On the client
-// // 1. app.getInitialProps
-// // 2. page.getInitialProps
-// // 3. app.render
-// // 4. page.render
-
-// // Render app and page and get the context of the page with collected side effects.
-// const sheets = new ServerStyleSheets();
-// const originalRenderPage = ctx.renderPage;
-
-// ctx.renderPage = () =>
-// originalRenderPage({
-// enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
-// });
-
-// const initialProps = await Document.getInitialProps(ctx);
-
-// return {
-// ...initialProps,
-// // Styles fragment is rendered after the app and page rendering finish.
-// styles: (
-// <React.Fragment>
-// {initialProps.styles}
-// {sheets.getStyleElement()}
-// </React.Fragment>
-// ),
-// };
-// };
+MyDocument.propTypes = propTypes;
 
 export default MyDocument;