使用Next.js 8和Styled-jsx时强烈的FOUC

Question

I have recently upgraded to Next.js 8.0.3 from 6.1.1 and I am now encountering a very intense flash of un-styled content (FOUC) for my header content which is using styled-jsx . 我最近从6.1.1升级到了Next.js 8.0.3 ，现在我的标题内容正在使用styled-jsx时遇到非常强烈的未样式化内容（FOUC）。 It loaded just fine before updating Next.js. 在更新Next.js之前，它加载得很好。

The header code that is flashing is a custom built npm module that uses styled-jsx (but not next ) and is being imported and placed into a layout page that is rendered with every next page. 闪烁的标头代码是一个自定义构建的npm模块，该模块使用styled-jsx （但不是next ），并且被导入并放置到随每个next呈现的布局页面中。

This was the implementation in the _document.js file before updating next and it was working: 这是在实施_document.js文件更新前next和它的工作：

import Document, { Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet, injectGlobal } from 'styled-components'
import styledNormalize from 'styled-normalize'
import flush from 'styled-jsx/server'
injectGlobal`
  ${styledNormalize}
`
export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet()
    const page = renderPage(App => props =>
      sheet.collectStyles(<App {...props} />)
    )
    const styleTags = sheet.getStyleElement()
    const styles = flush()
    return { ...page, styleTags, styles }
  }
  render() {
    return (
       <html>
        <Head>
          {this.props.styleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

Based on the docs I have also tried this (where I wait for the initial props): 根据文档，我也尝试过此操作（在这里等待初始道具）：

import Document, { Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet, injectGlobal } from 'styled-components'
import styledNormalize from 'styled-normalize'
import flush from 'styled-jsx/server'
injectGlobal`
  ${styledNormalize}
`
export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const page = ctx.renderPage(App => props =>
      sheet.collectStyles(<App {...props} />)
    )
    const initialProps = await Document.getInitialProps(ctx)
    const styleTags = sheet.getStyleElement()
    const styles = flush()
    return { ...initialProps, ...page, styles, styleTags }
  }
  render() {
    return (
       <html>
        <Head>
          {this.props.styleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

The flash might be a result of where I am implementing the module but not sure. 闪存可能是我在哪里实现模块的结果，但不确定。

It seems like the code coming in from the module is not being properly bundled with the rest of the pages and thus giving the page flash. 似乎来自模块的代码未与其余页面正确捆绑在一起，从而使页面闪烁。 Any thoughts or feedback would be appreciated. 任何想法或反馈将不胜感激。

Answer 1

I ended up fixing the issue by refactoring the custom npm module to not use styled-jsx but instead use styled-components. 我最终通过重构自定义npm模块以不使用styled-jsx而是使用styled-components来解决了该问题。 Not really a fix but more of a work around 并非真正的解决方案，而是更多解决方法

使用Next.js 8和Styled-jsx时强烈的FOUC

问题描述

1 个解决方案

解决方案1
0 2019-04-02 20:11:18

使用Next.js 8和Styled-jsx时强烈的FOUC

问题描述

1 个解决方案

解决方案1 0 2019-04-02 20:11:18

解决方案1
0 2019-04-02 20:11:18