Skip to content
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

Closed
titusgahissy opened this issue Oct 26, 2016 · 4 comments
Closed

CSS in header #95

titusgahissy opened this issue Oct 26, 2016 · 4 comments

Comments

@titusgahissy
Copy link

titusgahissy commented Oct 26, 2016

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 use glamor)

<Head>
  <meta charSet='utf-8'/>
  <meta name='viewport' content='initial-scale=1.0, width=device-width'/>
  <link rel="stylesheet" href="/static/css/application.css"/>
  <script defer src="/static/js/application.js"></script>
</Head>

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.

@nkzawa
Copy link
Contributor

nkzawa commented Oct 27, 2016

It seems that the flicker is a bug. It shouldn't happen :(

@nodegin
Copy link
Contributor

nodegin commented Oct 28, 2016

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.

@hugotox
Copy link

hugotox commented Aug 27, 2017

really?? On every page?? We don't have a way to customize the html Next uses?

@IanMitchell
Copy link
Contributor

We do, it's on the ReadMe here: https://github.com/zeit/next.js#custom-document

@lock lock bot locked as resolved and limited conversation to collaborators May 11, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants