From 36b7b20e2a7050345dee91e9545d74b0a9b21d45 Mon Sep 17 00:00:00 2001 From: Bryan Date: Wed, 19 Jan 2022 13:24:30 -0800 Subject: [PATCH] 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 `` 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. --- site/pages/_app.tsx | 19 +++++++++++++++---- site/pages/_document.tsx | 33 +++++++++++++++++++++++++++++++++ site/static/favicon.ico | Bin 0 -> 4286 bytes site/static/favicon.png | Bin 0 -> 571 bytes site/static/favicon.svg | 1 + 5 files changed, 49 insertions(+), 4 deletions(-) create mode 100644 site/pages/_document.tsx create mode 100644 site/static/favicon.ico create mode 100644 site/static/favicon.png create mode 100644 site/static/favicon.svg diff --git a/site/pages/_app.tsx b/site/pages/_app.tsx index 9cb8010a5d..f57ad10d6c 100644 --- a/site/pages/_app.tsx +++ b/site/pages/_app.tsx @@ -40,16 +40,27 @@ const Contents: React.FC = ({ 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 }) => ( +
{typeof window === "undefined" ? null : children}
+) + /** * is the root rendering logic of the application - setting up our router * and any contexts / global state management. */ const MyApp: React.FC = (appProps) => { return ( - - - - + + + + + + ) } diff --git a/site/pages/_document.tsx b/site/pages/_document.tsx new file mode 100644 index 0000000000..12a08ff3f8 --- /dev/null +++ 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 ( + + + + + + + + + + + + +
+ + + + ) + } +} + +export default MyDocument diff --git a/site/static/favicon.ico b/site/static/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..2e20e00e1a1dcb5779342ed92cb5bf133a3b041b GIT binary patch literal 4286 zcmeHHJ8l~>5T)Y6MG6TBkTz4MRFOU#=mNfhm=i=dFacjcH;~J8$_==|9zaJ}-9RZ_ z1YzEjIKhBfiIQCf(KFu8aOTZtxwf4f;YY;r>Ap^!d+VHg4a2H!gU%*STM8P?;ttR9lQq-<; z{1OufdIZEumO6okScAITW*<2`1m+IpJ)MH>8%_z4djxgXDr*-e#+-t?@EkR8#4=AE z>A_PFBvq^L>P?I}h3a-1IASB>s`W=SHmuq{2U(*rT7|wpV^a+d*oc_c`+>X-H8`lY z_Wt&}^r#bX2OYK&GPaIBs=?i|52sCQ!b^oT109O~JFmi0=;CLrNK zjnirz?*5&rwR!b-IZu7e8V^e}pz2D?x+$m-I99{_Qj@Tf&x~6g{WYkN>~NnASZaA* zfdZEJf`IKGOF=#hEO)oPsck^XwujX`dr~jpF>qg7!`gUEoa6Vf)YUkz^kMq0=(E6? zJJ(R&ncbyFv7Nodd6mg|79Iy%YjZV!0>M4F24m(NR={)NA$;!q+6?v%1LTeh59cNG z1M2xLJXqeXAT~tao5I6+$^2;QziHEK8(42x?uXQ0|9=>}1dkBw{ylsF6;n7(LCvYP z`}6PhQY=uQ^VPCv4g6-RS9?xf*;f$gi(Wj}5FpUGYKOj0tq=18Mv(W%UOiYtfI#PN z;LmFX*Zlu;18E4`n{jGKH>q_G;Ot%Zl=*WuhJV}rn7Ntz6kfTu{V>`-xpDi;eQcBa Z+@+AZltPy}@}W!L!8V~6xJ|d^xZhhaYyAKK literal 0 HcmV?d00001 diff --git a/site/static/favicon.png b/site/static/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..ebb0c8c8062b5603f44c42a695670b2b48477de6 GIT binary patch literal 571 zcmV-B0>u4^P)@1z3&;l zT<&rqhrq-{7)q^rlL-iF>(jGMzOKcCvQr%nXlj{Lcfs}GUx*Ca&N>uyWkG)iY(zyMjmIu z7cD)D)oAawZ6>Mli{U>OTNNHd+84gyI}>cf7Ri`BWeewKeu;iXO0>5o6}D3|%HVIY zoWhfUM4`K(+>^i&YQ;0={EBfem?0{yH}?HyXfh>WOH3{E8`ojW#u3gWV1r&OIHB11 z?7M) \ No newline at end of file