Geist UI don't work on first reload for nextjs website in production #455
-
|
I noticed this strange behavior that's happening with my live nextjs app which uses Geist for the UI. In development mode, the UI works correctly without any error but after making the site live, on first load for some pages i get no css just plain html until I reload the same again before Geist css takes effect. The site is hosted on vercel |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 1 reply
-
|
Did you notice the documentation here and try it? server-render NextJS needs to collect styles when generating the first HTML, and if you want to include the base styles in the HTML, you need to at least follow the flow of the server-render document to complete the style pre-render. Because in the Geist UI, collecting styles is not automatic, but collecting HTML elements is automatic, if you do not add this code, it is likely that the first time the home page renders the only HTML but not styles. If you've tried and can't solve it, please provide an online example. (etc. codesandbox.) |
Beta Was this translation helpful? Give feedback.
-
|
Adding this to import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
import CssBaseline from '@/styles/css-baseline';
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx)
const styles = CssBaseline.flush()
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{styles}
</>
),
}
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocumentYou can refer this too Link EDIT : This is covered in the Docs Here ⚡️ |
Beta Was this translation helpful? Give feedback.
-
|
Docs has been moved here. |
Beta Was this translation helpful? Give feedback.
-
|
This is weird. I followed the instructions from the server rendering page in the docs, but there is still a visible layout shift, and worse, the components are unstyled for the first second. You can see it here: https://url-to-bibtex.vercel.app/. The source code can be found here: https://github.com/karlosos/url_to_bibtex. I couldn't fix the problem. The problem is visible the first time the site is loaded on a fresh browser. Try to reproduce it in incognito mode. |
Beta Was this translation helpful? Give feedback.
Adding this to
pages/_document.tsxshould solve the Cumulative Layout Shift Problem.