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

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

0 голосов
/ 07 марта 2019

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

0 голосов
/ 02 апреля 2019

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

...