old bronze
On initial page load I can see an html-only page for a fraction of a second before JS and css is loaded.
In Firefox it's visible on every page refresh.
And ideas why this happens? Deployed it on vercel:
https://lb-vercel-jwlq7pb8j-euw.vercel.app/lol-boosting/solo
echo grail
Same here, In my case I guess it's coming from combine both of server component and client component, and I have no idea to fix this problem. That's why I were here.
dusk barn
On initial page load I can see an html-only page for a fraction of a second befo...
it doesn't happen for my apps, so you need to provide more info for anyone to be able to help
strong zodiac
This has happened to me ( sometimes ) and i thought it's something to do with tailwind
dusk barn
well, i exclusively use tailwind and it has never ever happened to me
exotic zodiac
I have also been seeing this a lot, but haven't been able to track it down. It is most noticeable for me on pages where I am using heroicons because there is a flash of huge icon before everything lays out correctly
quick reef
I have also been seeing this a lot, but haven't been able to track it down. It i...
I am also having the exact same issue with Heroicons. It seems like the tailwind stylesheet takes a fraction of a second to load sometimes. Looks absolutely terrible when it does. Please let me know if you find a solution.
old bronze
I have found that styled components is causing this issue for me.
Old version:
https://lb-vercel-jwlq7pb8j-euw.vercel.app/lol-boosting/solo
Fixed version:
https://lb-vercel-9rdpgcqer-euw.vercel.app/lol-boosting/solo
Since nextjs prerenders pages serverside, the css styles have to be applied serverside aswell.
Adding the following code to _document.js in the pages folder fixes it:
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
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()
}
}
}
I found out this is a bug with firefox and the first answer on this thread has solved it for me: https://stackoverflow.com/questions/21147149/flash-of-unstyled-content-fouc-in-firefox-only-is-ff-slow-renderer. Hopefully this helps someone. Seems very hacky tbh but I couldn't resolve this any other way and have spent too much time on it at this point.
