mirror of https://github.com/coder/coder.git
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:  ...and when that happened, there'd be an accompanying error in the console:  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.
This commit is contained in:
Bryan
GitHub
parent
6e6eee633c
commit
36b7b20e2a
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 571 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="110" height="78" fill="none" viewBox="0 0 110 78"><style>path{fill:#000}@media (prefers-color-scheme:dark){path{fill:#fff}}</style><path d="M106.69 33.8897C104.511 33.8897 103.059 32.6121 103.059 29.9897V14.9276C103.059 5.31206 99.0976 0 88.8643 0H84.1107V10.1534H85.5633C89.5905 10.1534 91.5051 12.3724 91.5051 16.3396V29.6535C91.5051 35.4362 93.2216 37.7897 96.9849 39C93.2216 40.1432 91.5051 42.5638 91.5051 48.3465C91.5051 51.6415 91.5051 54.9362 91.5051 58.2312C91.5051 60.9879 91.5051 63.6776 90.7789 66.4344C90.0527 68.9897 88.8643 71.4103 87.2138 73.4947C86.2895 74.7053 85.2331 75.7138 84.0449 76.6553V78H88.7982C99.0316 78 102.993 72.6879 102.993 63.0724V48.0103C102.993 45.3206 104.379 44.1103 106.624 44.1103H109.331V33.9568H106.69V33.8897Z"/><path d="M74.3397 15.3331H59.683C59.3528 15.3331 59.0889 15.0641 59.0889 14.7279V13.5849C59.0889 13.2486 59.3528 12.9797 59.683 12.9797H74.4057C74.7357 12.9797 74.9998 13.2486 74.9998 13.5849V14.7279C74.9998 15.0641 74.6696 15.3331 74.3397 15.3331Z"/><path d="M76.8483 29.8566H66.153C65.8228 29.8566 65.5586 29.5875 65.5586 29.2513V28.1083C65.5586 27.7722 65.8228 27.5031 66.153 27.5031H76.8483C77.1785 27.5031 77.4424 27.7722 77.4424 28.1083V29.2513C77.4424 29.5204 77.1785 29.8566 76.8483 29.8566Z"/><path d="M81.0737 22.5948H59.683C59.3528 22.5948 59.0889 22.3259 59.0889 21.9897V20.8465C59.0889 20.5103 59.3528 20.2414 59.683 20.2414H81.0077C81.3379 20.2414 81.602 20.5103 81.602 20.8465V21.9897C81.602 22.2586 81.4039 22.5948 81.0737 22.5948Z"/><path d="M42.7154 18.6259C44.1678 18.6259 45.6204 18.7604 47.0068 19.0966V16.3396C47.0068 12.4396 48.9874 10.1534 52.9488 10.1534H54.4012V0H49.6476C39.4142 0 35.4531 5.31206 35.4531 14.9276V19.9034C37.7637 19.0966 40.2067 18.6259 42.7154 18.6259Z"/><path d="M85.5634 55.2037C84.507 46.664 78.0369 39.5364 69.7182 37.9226C67.4076 37.452 65.0967 37.3846 62.8521 37.7881C62.7861 37.7881 62.7861 37.7208 62.7201 37.7208C59.0889 29.9881 51.2985 24.8777 42.8477 24.8777C34.397 24.8777 26.6726 29.8537 22.9753 37.5864C22.9093 37.5864 22.9093 37.6537 22.8433 37.6537C20.4666 37.3846 18.0898 37.519 15.713 38.1243C7.5264 40.1414 1.32042 47.1346 0.198063 55.607C0.066021 56.4811 0 57.3552 0 58.1623C0 60.7173 1.71655 63.0708 4.22534 63.407C7.32833 63.8778 10.0352 61.457 9.96918 58.364C9.96918 57.8932 9.96918 57.3552 10.0352 56.8846C10.5634 52.5811 13.7984 48.9502 18.0237 47.9414C19.3442 47.6052 20.6646 47.5381 21.919 47.7399C25.9463 48.2778 29.9075 46.1932 31.6241 42.5623C32.8786 39.8726 34.8592 37.519 37.5001 36.2414C40.4048 34.8293 43.706 34.6278 46.7431 35.7037C49.9119 36.8467 52.2886 39.2673 53.7412 42.2932C55.2596 45.252 55.9858 47.3364 59.221 47.7399C60.5413 47.9414 64.2385 47.8743 65.625 47.807C68.3319 47.807 71.0388 48.7484 72.9534 50.6984C74.2076 52.0432 75.1319 53.7243 75.5282 55.607C76.1223 58.6329 75.3961 61.6587 73.6135 63.9449C72.359 65.5587 70.6425 66.769 68.7279 67.307C67.8036 67.5761 66.8793 67.6432 65.955 67.6432C65.4269 67.6432 64.7007 67.6432 63.8425 67.6432C61.2017 67.6432 55.5898 67.6432 51.3643 67.6432C48.4596 67.6432 46.1487 65.2899 46.1487 62.3311V52.3793V42.6293C46.1487 41.8226 45.4886 41.1502 44.6963 41.1502H42.6496C38.6222 41.2173 35.3873 45.7899 35.3873 50.6311C35.3873 55.4726 35.3873 68.3158 35.3873 68.3158C35.3873 73.5605 39.5465 77.7967 44.6963 77.7967C44.6963 77.7967 67.6057 77.7293 67.9357 77.7293C73.2173 77.1914 78.103 74.4346 81.4039 70.1984C84.7051 66.0967 86.2235 60.7173 85.5634 55.2037Z"/></svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
Loading…
Reference in New Issue