fix: Hydration warnings / mismatched styles due to SSR (#31)

While starting on the create workspace flow - I noticed some weird CSS issues. In particular, intermittently, the web UI would render like this: ![image](https://user-images.githubusercontent.com/88213859/150072041-f1c6b9b2-941c-41a8-ad84-b7b163b3504f.png) ...and when that happened, there'd be an accompanying error in the console: ![image](https://user-images.githubusercontent.com/88213859/150072101-d98cb714-d133-4532-8a02-a7642d242a02.png) The issue is that NextJS is trying to render the page on the server and use the styles - and sometimes the classnames mismatch between server-side and client-side rendering. We actually worked around this in `cdr/m` with a `<SafeHydration />` component and a custom `_document.tsx` This change ports over both the component and custom `_document.tsx`. I noticed, in addition, I missed the favicons when switching to NextJS, so I brought those over too.
coder · Jan 19, 2022 · 36b7b20 · 36b7b20
1 parent 6e6eee6
commit 36b7b20
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 4 deletions.
diff --git a/site/pages/_app.tsx b/site/pages/_app.tsx
@@ -40,16 +40,27 @@ const Contents: React.FC<AppProps> = ({ Component, pageProps }) => {
   )
 }
 
+/**
+ * ClientRender is a component that only allows its children to be rendered
+ * client-side. This check is performed by querying the existence of the window
+ * global.
+ */
+const ClientRender: React.FC = ({ children }) => (
+  <div suppressHydrationWarning>{typeof window === "undefined" ? null : children}</div>
+)
+
 /**
  * <App /> is the root rendering logic of the application - setting up our router
  * and any contexts / global state management.
  */
 const MyApp: React.FC<AppProps> = (appProps) => {
   return (
-    <ThemeProvider theme={dark}>
-      <CssBaseline />
-      <Contents {...appProps} />
-    </ThemeProvider>
+    <ClientRender>
+      <ThemeProvider theme={dark}>
+        <CssBaseline />
+        <Contents {...appProps} />
+      </ThemeProvider>
+    </ClientRender>
   )
 }
 

diff --git a/site/pages/_document.tsx b/site/pages/_document.tsx
@@ -0,0 +1,33 @@
+import Document, { DocumentContext, Head, Html, Main, NextScript } from "next/document"
+import React from "react"
+
+class MyDocument extends Document {
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render(): JSX.Element {
+    return (
+      <Html>
+        <Head>
+          <meta charSet="utf-8" />
+          <meta name="theme-color" content="#17172E" />
+          <meta name="application-name" content="Coder" />
+          <meta property="og:type" content="website" />
+          <meta property="csp-nonce" content="{{ .CSP.Nonce }}" />
+          <link crossOrigin="use-credentials" rel="mask-icon" href="/static/favicon.svg" color="#000000" />
+          <link rel="alternate icon" type="image/png" href="/static/favicon.png" />
+          <link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
diff --git a/site/static/favicon.ico b/site/static/favicon.ico
diff --git a/site/static/favicon.png b/site/static/favicon.png
diff --git a/site/static/favicon.svg b/site/static/favicon.svg