Getting flash of unstyled content (FOUC) with styled-components #40122
Comments
GuerrillaCoder
changed the title
|
I discovered the Issue was that I had created a custom `_document.tsx" without getting the styles and injecting them. I updated the page to this: import * as React from 'react';
import Document,{ DocumentContext, Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet()
const originalRenderPage = ctx.renderPage
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: [initialProps.styles, sheet.getStyleElement()],
}
} finally {
sheet.seal()
}
}
render() {
return (
<Html>
<Head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
</Head>
<body>
<script>0</script>
<Main />
<NextScript />
</body>
</Html>
)
}
}This works better and most of the styles now load without javascript enabled but not all of them. I am guessing I need to inject something from the context into the head but I am not sure exactly what I should be doing, I can't find example of styled-components with modified |
|
Issue was that development mode doesn't include CSS includes, after I exported it CSS all loads now properly apart from a slight jump from the google font loading in |
|
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Verify canary release
Provide environment information
What browser are you using? (if relevant)
Chrome Version 104.0.5112.102 (Official Build) (64-bit)
How are you deploying your application? (if relevant)
Vercel
Describe the Bug
I am getting a flash of unstyled content on my site that is quite bad. For 1-2 seconds my unstyled menu and page appears then the styles load on page refresh.
I created a new project and started copying stuff across to see what caused the issue and I discovered that adding fontawesome caused the issue to occur (quicker than on my site but still visible).
When refreshing page you can see the unstyled
<ul>list of the menu. The menu is styled with thestyled-componentswhich I think might have something to do with it.I am using SWC but I have tried installing babelrc plugin and the same behavior occurs.
Expected Behavior
The site should load its initial state with styles.
Link to reproduction
https://github.com/GuerrillaCoder/fouc-issue
To Reproduce
You can run
yarn run devin the project yourself or you can see it here on vercel: https://fouc-issue.vercel.app/Open dev tools and disable cache then do a full page refresh and you should be able to see a flash of the unstyled menu.
Also if you load page without javascript enabled the styles do not load.
The text was updated successfully, but these errors were encountered: