Блог

Главная - Вопросы по программированию - Интенсивный FOUC при использовании Next.js 8 и стиля-jsx

Интенсивный FOUC при использовании Next.js 8 и стиля-jsx

#reactjs #styled-components #next.js #css-in-js

#reactjs #styled-компоненты #next.js #css-в-js

Вопрос:

Я недавно обновился до Next.js 8.0.3 от 6.1.1 и теперь я сталкиваюсь с очень интенсивной вспышкой не оформленного содержимого (FOUC) для содержимого моего заголовка, которое использует styled-jsx . Он отлично загрузился перед обновлением Next.js .

Мигающий код заголовка представляет собой пользовательский модуль npm, который использует styled-jsx (но не next использует) и импортируется и помещается на страницу макета, которая отображается на каждой next странице.

Это была реализация в _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>
    )
  }
}

Основываясь на документах, я также пробовал это (где я жду начальных реквизитов): 

 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>
    )
  }
}

Вспышка может быть результатом того, где я внедряю модуль, но не уверен.

Похоже, что код, поступающий из модуля, неправильно объединяется с остальными страницами и, таким образом, выдает страницу flash. Любые мысли или отзывы были бы оценены.

Ответ №1:

В итоге я исправил проблему путем рефакторинга пользовательского модуля npm, чтобы не использовать styled-jsx, а вместо этого использовать styled-components. На самом деле это не исправление, а скорее обходной путь