Next.js: next v5 load css after dom render

Created on 6 Feb 2018 · 16Comments · Source: vercel/next.js

Thank u for the excellent works on next@5.
I found that it uses 'blob:http://localhost:3000/0xxxxxxx' to load css/scss into the page after dom is rendered.
So the users will see the page without styles about 1 or 2 seconds. I believe it is the only behavior in development mode at first.
So I tried build with yarn build & run server in production model with yarn start.But this time, I see no css files loaded.
Did I miss something or this is designed?

Source

davidqhr

👍4

Most helpful comment

Please @timneutkens reopen this issue. Is not a dup of zeit/next-plugins#1. It's an issue with next 5 and node 8.

Here is the most basic example using nothing but styled-jsx:

import React from 'react'

export default () => <div>
  <div className="navbar">
    <strong>Test</strong>
  </div>
  <div className="content">
    <h1>Hello world</h1>
  </div>
  <style jsx>{`
    .navbar {
      background-color: cadetblue;
      color: white;
      padding: 10px 20px;
    }
    .content {
      width: 80%;
      margin: 0 auto;
    }
  `}</style>
</div>

The html generated server side is:

<!DOCTYPE html>
<html>
<head>
  <meta charSet="utf-8" class="next-head"/>
  <link rel="preload" href="/_next/-/page/index.js" as="script"/>
  <link rel="preload" href="/_next/-/page/_error.js" as="script"/>
  <link rel="preload" href="/_next/-/manifest.js" as="script"/>
  <link rel="preload" href="/_next/-/commons.js" as="script"/>
  <link rel="preload" href="/_next/-/main.js" as="script"/>
</head>
<body>
<div id="__next">
  <div class="jsx-3168404162" data-reactroot="">
    <div class="jsx-3168404162 navbar"><strong class="jsx-3168404162">Test</strong></div>
    <div class="jsx-3168404162 content"><h1 class="jsx-3168404162">Hello world</h1></div>
  </div>
</div>
<div id="__next-error"></div>
<script>
  __NEXT_DATA__ = {
    'props': {},
    'pathname': '/',
    'query': {},
    'buildId': '-',
    'buildStats': null,
    'assetPrefix': '',
    'nextExport': false,
    'err': null,
    'chunks': []
  }
  module = {}
  __NEXT_LOADED_PAGES__ = []
  __NEXT_LOADED_CHUNKS__ = []

  __NEXT_REGISTER_PAGE = function (route, fn) {
    __NEXT_LOADED_PAGES__.push({route: route, fn: fn})
  }

  __NEXT_REGISTER_CHUNK = function (chunkName, fn) {
    __NEXT_LOADED_CHUNKS__.push({chunkName: chunkName, fn: fn})
  }
</script>
<script async="" id="__NEXT_PAGE__/" type="text/javascript" src="/_next/-/page/index.js"></script>
<script async="" id="__NEXT_PAGE__/_error" type="text/javascript" src="/_next/-/page/_error.js"></script>
<script type="text/javascript" src="/_next/-/manifest.js"></script>
<script type="text/javascript" src="/_next/-/commons.js"></script>
<script type="text/javascript" src="/_next/-/main.js"></script>
</body>
</html>

As you can see, no styles were attached. This happens running dev or production mode. If running this with node 6, styles are correctly rendered server side.

Please let me know if I can provide more details or help testing in different environment. Thanks a lot!

hugotox on 21 Feb 2018

👍2

All 16 comments

I am seeing the same issue. Just upgraded from next 4.2.3 to 5.0 and I see the FOUC in dev and production mode. I use the styled-jsx like in the examples.

hugotox on 6 Feb 2018

Duplicate of https://github.com/zeit/next-plugins/issues/1

So I tried build with yarn build & run server in production model with yarn start.But this time, I see no css files loaded.

Just added this to explain how it works in production:
https://github.com/zeit/next-plugins/tree/master/packages/next-css#production-usage

timneutkens on 6 Feb 2018

@hugotox I can't reproduce a FOUC with styled-jsx. The styles are server rendered as they should.

I'm going to close this issue as duplicate of zeit/next-plugins#1

timneutkens on 6 Feb 2018

@timneutkens Same issue here. I'm using Fela for css. After updating next to 5.0 server stop rendering CSS. They get rendered only on client side. I was following with-fela example.

devilcoders on 6 Feb 2018

@timneutkens yeah I've rm -rf'ed node modules, installed again and now it works from server side and no more FOUC. Thanks!

hugotox on 7 Feb 2018

@hugotox @timneutkens This is still an issue :(

devilcoders on 7 Feb 2018

@timneutkens FIY: getting same FOUC issue with fela on next5 ( you can reproduce it here https://github.com/zeit/next.js/tree/master/examples/with-fela ) For some reason sheetList is empty array.

sheetList:  []

Same example on next4 working fine.

ilionic on 9 Feb 2018

👍1

Update from my side: FOUC happens only when running nextjs 5 with node 8.x. If I go back to node 6.x it works fine. I'm using styled-jsx and the (deprecated) example https://github.com/zeit/next.js/tree/canary/examples/with-external-scoped-css

hugotox on 16 Feb 2018

Please @timneutkens reopen this issue. Is not a dup of zeit/next-plugins#1. It's an issue with next 5 and node 8.

Here is the most basic example using nothing but styled-jsx:

import React from 'react'

export default () => <div>
  <div className="navbar">
    <strong>Test</strong>
  </div>
  <div className="content">
    <h1>Hello world</h1>
  </div>
  <style jsx>{`
    .navbar {
      background-color: cadetblue;
      color: white;
      padding: 10px 20px;
    }
    .content {
      width: 80%;
      margin: 0 auto;
    }
  `}</style>
</div>

The html generated server side is:

<!DOCTYPE html>
<html>
<head>
  <meta charSet="utf-8" class="next-head"/>
  <link rel="preload" href="/_next/-/page/index.js" as="script"/>
  <link rel="preload" href="/_next/-/page/_error.js" as="script"/>
  <link rel="preload" href="/_next/-/manifest.js" as="script"/>
  <link rel="preload" href="/_next/-/commons.js" as="script"/>
  <link rel="preload" href="/_next/-/main.js" as="script"/>
</head>
<body>
<div id="__next">
  <div class="jsx-3168404162" data-reactroot="">
    <div class="jsx-3168404162 navbar"><strong class="jsx-3168404162">Test</strong></div>
    <div class="jsx-3168404162 content"><h1 class="jsx-3168404162">Hello world</h1></div>
  </div>
</div>
<div id="__next-error"></div>
<script>
  __NEXT_DATA__ = {
    'props': {},
    'pathname': '/',
    'query': {},
    'buildId': '-',
    'buildStats': null,
    'assetPrefix': '',
    'nextExport': false,
    'err': null,
    'chunks': []
  }
  module = {}
  __NEXT_LOADED_PAGES__ = []
  __NEXT_LOADED_CHUNKS__ = []

  __NEXT_REGISTER_PAGE = function (route, fn) {
    __NEXT_LOADED_PAGES__.push({route: route, fn: fn})
  }

  __NEXT_REGISTER_CHUNK = function (chunkName, fn) {
    __NEXT_LOADED_CHUNKS__.push({chunkName: chunkName, fn: fn})
  }
</script>
<script async="" id="__NEXT_PAGE__/" type="text/javascript" src="/_next/-/page/index.js"></script>
<script async="" id="__NEXT_PAGE__/_error" type="text/javascript" src="/_next/-/page/_error.js"></script>
<script type="text/javascript" src="/_next/-/manifest.js"></script>
<script type="text/javascript" src="/_next/-/commons.js"></script>
<script type="text/javascript" src="/_next/-/main.js"></script>
</body>
</html>

As you can see, no styles were attached. This happens running dev or production mode. If running this with node 6, styles are correctly rendered server side.

Please let me know if I can provide more details or help testing in different environment. Thanks a lot!

hugotox on 21 Feb 2018

👍2

Update: the solution described here https://github.com/zeit/next.js/issues/3434 worked for me: Using a custom _document.js and including styled-jsx as dependency

hugotox on 22 Feb 2018

I am also having this problem

rustanacexd on 15 Mar 2018

I'm seeing this in Next 4 too, prod build (linked to a compile css file in _document, it isn't fully applied on first load).

IanMitchell on 19 Mar 2018

Any update on this? Just updated a project to Next 5 and I'm having the same issues with the FOUC as other people have said above. I tried adding a custom _document.js page, but no luck.

agionfriddo on 30 Mar 2018

I'm having this issue too... After changing to another page for the first time I can see on console that the css modules were applied (i'm following with-sass) but the page remains unstyled...