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, { 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>
-    );
-  }
-}
+class MyDocument extends Document {
+  static async getInitialProps(
+    ctx: DocumentContext,
+  ): Promise<DocumentInitialProps> {
+    const materialUiSheets = new MaterialUiServerStyleSheets();
+    const originalRenderPage = ctx.renderPage;

-// `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();
-  const originalRenderPage = ctx.renderPage;
+    ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: (App) => (props) =>
+          materialUiSheets.collect(
+            <App
+              /* eslint-disable react/jsx-props-no-spreading */
+              {...props}
+            />,
+          ),
+      });

-  ctx.renderPage = () =>
-    originalRenderPage({
-      enhanceApp: (App) => (props) =>
-        sheets.collect(
-          <App
-            /* eslint-disable react/jsx-props-no-spreading */
-            {...props}
-          />,
-        ),
-    });
+    const initialProps = await Document.getInitialProps(ctx);

-  const initialProps = await Document.getInitialProps(ctx);
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          {materialUiSheets.getStyleElement()}
+        </>
+      ),
+    };
+  }
+}

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