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,34 +1,18 @@
-import { Children } from 'react';
-import Document, { Html, Head, Main, NextScript } from 'next/document';
-import { ServerStyleSheets } from '@material-ui/core/styles';
+import Document, { DocumentInitialProps, DocumentContext } from 'next/document';
+import { ServerStyleSheets as MaterialUiServerStyleSheets } from '@material-ui/styles';
+// import { ServerStyleSheet as StyledComponentSheets } from 'styled-components';

-export default class MyDocument extends Document {
-  render(): JSX.Element {
-    return (
-      <Html lang="en">
-        <Head>
-          <meta charSet="utf-8" />
-        </Head>
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    );
-  }
-}
-
-// `getInitialProps` belongs to `_document` (instead of `_app`),
-// it's compatible with server-side generation (SSG).
-MyDocument.getInitialProps = async (ctx) => {
-  // Render app and page and get the context of the page with collected side effects.
-  const sheets = new ServerStyleSheets();
+class MyDocument extends Document {
+  static async getInitialProps(
+    ctx: DocumentContext,
+  ): Promise<DocumentInitialProps> {
+    const materialUiSheets = new MaterialUiServerStyleSheets();
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) =>
-        sheets.collect(
+          materialUiSheets.collect(
            <App
              /* eslint-disable react/jsx-props-no-spreading */
              {...props}
@ -40,10 +24,14 @@ MyDocument.getInitialProps = async (ctx) => {

    return {
      ...initialProps,
-    // Styles fragment is rendered after the app and page rendering finish.
-    styles: [
-      ...Children.toArray(initialProps.styles),
-      sheets.getStyleElement(),
-    ],
+      styles: (
+        <>
+          {initialProps.styles}
+          {materialUiSheets.getStyleElement()}
+        </>
+      ),
    };
-};
+  }
+}
+
+export default MyDocument;