refactor: change document template to use material-ui during SSR

4 years ago · a552028e80
parent fa7084f5c4
commit a552028e80
1 changed files with 32 additions and 44 deletions
--- a/striker-ui/pages/_document.tsx
+++ b/striker-ui/pages/_document.tsx
@ -1,49 +1,37 @@
-import { Children } from 'react';
+import Document, { DocumentInitialProps, DocumentContext } from 'next/document';
-import Document, { Html, Head, Main, NextScript } from 'next/document';
+import { ServerStyleSheets as MaterialUiServerStyleSheets } from '@material-ui/styles';
-import { ServerStyleSheets } from '@material-ui/core/styles';
+// import { ServerStyleSheet as StyledComponentSheets } from 'styled-components';
-export default class MyDocument extends Document {
+class MyDocument extends Document {
-  render(): JSX.Element {
+  static async getInitialProps(
-    return (
+    ctx: DocumentContext,
-      <Html lang="en">
+  ): Promise<DocumentInitialProps> {
-        <Head>
+    const materialUiSheets = new MaterialUiServerStyleSheets();
-          <meta charSet="utf-8" />
+    const originalRenderPage = ctx.renderPage;
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
 }
-// `getInitialProps` belongs to `_document` (instead of `_app`),
+    ctx.renderPage = () =>
-// it's compatible with server-side generation (SSG).
+      originalRenderPage({
-MyDocument.getInitialProps = async (ctx) => {
+        enhanceApp: (App) => (props) =>
-  // Render app and page and get the context of the page with collected side effects.
+          materialUiSheets.collect(
-  const sheets = new ServerStyleSheets();
+            <App
-  const originalRenderPage = ctx.renderPage;
+              /* eslint-disable react/jsx-props-no-spreading */
              {...props}
            />,
          ),
      });
-  ctx.renderPage = () =>
+    const initialProps = await Document.getInitialProps(ctx);
    originalRenderPage({
      enhanceApp: (App) => (props) =>
        sheets.collect(
          <App
            /* eslint-disable react/jsx-props-no-spreading */
            {...props}
          />,
        ),
    });
-  const initialProps = await Document.getInitialProps(ctx);
+    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          {materialUiSheets.getStyleElement()}
        </>
      ),
    };
  }
 }
-  return {
+export default MyDocument;
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      ...Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  };
 };