-
Notifications
You must be signed in to change notification settings - Fork 27.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS in header #95
Comments
It seems that the flicker is a bug. It shouldn't happen :( |
I solved (probably?) the flicker bug by this method: In your server side code: api.get('/style', (req, res) => {
res.send(`
body {
background: #eee;
margin: 0;
}
`.replace(/\s{2,}/g, ''))
}) and in every of your pages: static async getInitialProps ({ req }) {
const isServer = !!req
const host = isServer ? req.headers.host : location.origin
const stylesheet = await (await fetch(host + '/api/style')).text()
return {
isServer,
stylesheet,
}
}
render () {
return (
<div>
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<style dangerouslySetInnerHTML={{ __html: this.props.stylesheet }} />
</Head>
</div>
)
} Maybe it's still flickering, but around 0ms so your eyes won't see that, since the head element is still being updated every page transition. |
really?? On every page?? We don't have a way to customize the html Next uses? |
We do, it's on the ReadMe here: https://github.com/zeit/next.js#custom-document |
Hello,
I'm trying to include a css resource using the
Head
component (it's a large css file, so I don't want to useglamor
)Unfortunately by doing so, when I navigate to another page, the css gets unloaded and then loaded again causing the UI to kinda "flicker".
What's the NextJS way to deal with that use case?
Thank you.
The text was updated successfully, but these errors were encountered: