fix(home): fix server-side rendering (#695)

ocavue · Jul 10, 2021 · bef5064 · bef5064
1 parent 4e360c0
commit bef5064
Show file tree

Hide file tree

Showing 14 changed files with 653 additions and 1,437 deletions.
diff --git a/.eslintrc.yaml b/.eslintrc.yaml
@@ -48,6 +48,8 @@ rules:
   "@typescript-eslint/no-empty-function": off
   "@typescript-eslint/no-explicit-any": off
 
+  "@next/next/no-img-element": "off"
+
   # turn on the rules provided by `eslint-plugin-prettier` as `warn` instead of `error`
   "prettier/prettier": warn
 

diff --git a/packages/home/package.json b/packages/home/package.json
@@ -16,6 +16,7 @@
         "@material-ui/lab": "^4.0.0-alpha.60",
         "@material-ui/styles": "^4.11.4",
         "@rino.app/next": "workspace:0.0.0",
+        "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^12.0.0",
         "@types/react": "^17.0.14",
         "@types/react-dom": "^17.0.9",

diff --git a/packages/home/src/components/logo.tsx b/packages/home/src/components/logo.tsx
@@ -1,9 +1,5 @@
 import React from "react"
 
-import Svg from "../assets/share/img/icons/safari-pinned-tab.svg"
-
-export const Logo: React.FC<{ className?: string }> = (props) => (
-    <div {...props}>
-        <Svg alt="Rino" width="128" height="128" />
-    </div>
-)
+export const Logo: React.FC<{ className?: string }> = (props) => {
+    return <img src="/share/img/icons/safari-pinned-tab.svg" alt="Rino Logo" {...props} />
+}
diff --git a/packages/home/src/pages/_app.tsx b/packages/home/src/pages/_app.tsx
@@ -1,11 +1,30 @@
+/* istanbul ignore file */
+
+import { AppProps } from "next/app"
+import Head from "next/head"
 import React from "react"
 
-import { BaseApp } from "@rino.app/next/dist/app"
+const BaseApp: React.FC<AppProps> = (props) => {
+    const { Component, pageProps } = props
+
+    // https://github.com/mui-org/material-ui/blob/v4.12.1/examples/nextjs/pages/_app.js#L11-L17
+    React.useEffect(() => {
+        // Remove the server-side injected CSS.
+        const jssStyles = document.querySelector("#jss-server-side")
+        if (jssStyles) {
+            jssStyles.parentElement.removeChild(jssStyles)
+        }
+    }, [])
 
-export default function MyApp<T>({ Component, pageProps }: { Component: React.FC<T>; pageProps: T }) {
     return (
-        <BaseApp>
+        <React.Fragment>
+            <Head>
+                <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+                <title>Rino</title>
+            </Head>
             <Component {...pageProps} />
-        </BaseApp>
+        </React.Fragment>
     )
 }
+
+export default BaseApp
diff --git a/packages/home/src/pages/_document.tsx b/packages/home/src/pages/_document.tsx
@@ -1,15 +1,83 @@
-import Document from "next/document"
+/* istanbul ignore file */
 
-import { getNextDocument, getNextDocumentInitialProps } from "@rino.app/next/dist/document"
+import { ServerStyleSheets } from "@material-ui/core/styles"
+import Document, { DocumentContext, Head, Html, Main, NextScript } from "next/document"
+import React from "react"
 
-class MyDocument extends Document {
+import { NextMeta } from "@rino.app/next"
+
+class BaseDocument extends Document {
     render() {
-        return getNextDocument({ host: "https://www.rino.app", hasManifest: false })
+        const host = "https://www.rino.app"
+        const hasManifest = false
+        const description = "WYSIWYG Markdown Editor"
+
+        return (
+            <Html lang="en">
+                <Head>
+                    <NextMeta hasManifest={hasManifest} host={host} description={description} />
+                </Head>
+                <body>
+                    <noscript>
+                        <strong>
+                            We're sorry but Rino doesn't work properly without JavaScript enabled. Please enable it to continue.
+                        </strong>
+                    </noscript>
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+        )
+    }
+}
+
+// copied from https://github.com/mui-org/material-ui/blob/v4.12.1/examples/nextjs/pages/_document.js#L27-L68
+//
+// `getInitialProps` belongs to `_document` (instead of `_app`),
+// it's compatible with server-side generation (SSG).
+export async function getNextDocumentInitialProps(ctx: DocumentContext) {
+    // 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.Children.toArray(initialProps.styles), sheets.getStyleElement()],
     }
 }
 
-MyDocument.getInitialProps = async (ctx) => {
+BaseDocument.getInitialProps = async (ctx) => {
     return await getNextDocumentInitialProps(ctx)
 }
 
-export default MyDocument
+export default BaseDocument
diff --git a/packages/home/src/styles/theme.ts b/packages/home/src/styles/theme.ts
@@ -1,6 +1,6 @@
-import { createMuiTheme } from "@material-ui/core/styles"
+import { createTheme } from "@material-ui/core/styles"
 
-const theme = createMuiTheme({
+const theme = createTheme({
     overrides: {
         // Style sheet name ⚛️
         MuiButton: {

diff --git a/packages/next/next.base.config.js b/packages/next/next.base.config.js
@@ -30,44 +30,22 @@ function getNextConfig() {
             autoPrerender: false,
         },
         webpack: (config, options) => {
-            config.module.rules.push(
-                {
-                    test: /\.(jpe?g|png|webp)$/i,
-                    use: [
-                        {
-                            loader: "responsive-loader",
-                            options: {
-                                adapter: require("responsive-loader/sharp"),
-                                sizes: [320, 640, 960, 1200, 2400],
-                                placeholder: false,
-                                esModule: true,
-                                outputPath: "static/images/_responsive/",
-                                publicPath: "_next/static/images/_responsive/",
-                            },
+            config.module.rules.push({
+                test: /\.(jpe?g|png|webp)$/i,
+                use: [
+                    {
+                        loader: "responsive-loader",
+                        options: {
+                            adapter: require("responsive-loader/sharp"),
+                            sizes: [320, 640, 960, 1200, 2400],
+                            placeholder: false,
+                            esModule: true,
+                            outputPath: "static/images/_responsive/",
+                            publicPath: "_next/static/images/_responsive/",
                         },
-                    ],
-                },
-                {
-                    test: /\.svg$/i,
-                    use: [
-                        {
-                            loader: "@svgr/webpack",
-                            options: {
-                                svgoConfig: {
-                                    plugins: [
-                                        {
-                                            // SVGO will remove the svg attribute `viewBox` by default,
-                                            // which will stop me from resizing the image by setting
-                                            // `width` and `height`.
-                                            removeViewBox: false,
-                                        },
-                                    ],
-                                },
-                            },
-                        },
-                    ],
-                },
-            )
+                    },
+                ],
+            })
             return config
         },
         env: getEnvs(),

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -12,10 +12,8 @@
     "dependencies": {
         "@babel/core": "^7.14.6",
         "@material-ui/styles": "^4.11.4",
+        "@material-ui/core": "^4.12.1",
         "@next/bundle-analyzer": "^10.2.3",
-        "@svgr/webpack": "^5.5.0",
-        "@testing-library/jest-dom": "^5.14.1",
-        "@testing-library/react": "^12.0.0",
         "next": "^10.2.3",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",

diff --git a/packages/next/src/app.tsx b/packages/next/src/app.tsx
diff --git a/packages/next/src/document.tsx b/packages/next/src/document.tsx
diff --git a/packages/next/src/index.ts b/packages/next/src/index.ts
@@ -0,0 +1 @@
+export * from "./meta"