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

Я недавно обновился до 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>
    )
  }
}

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

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

Источник

1 ответ

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

Источник
Другие вопросы по тегам