Css 通用呈现在DOMContentLoaded事件和Load事件之间创建延迟_Css_Reactjs_Styled Components_Next.js_Universal React

Css 通用呈现在DOMContentLoaded事件和Load事件之间创建延迟

css reactjs next.js

Css 通用呈现在DOMContentLoaded事件和Load事件之间创建延迟,css,reactjs,styled-components,next.js,universal-react,Css,Reactjs,Styled Components,Next.js,Universal React,我对样式化组件非常兴奋，如果不是因为这个，我很想使用它… 我使用next.js通用渲染库准备了两个示例项目。第一个示例使用样式化组件作为解决方案，第二个示例使用css的默认解决方案，即样式化jsx。这两个示例都包含完全相同的代码，复杂性最低。您很快就会看到，在styled components示例中，DOMContentLoaded事件和Load事件之间存在令人不安的延迟，用户在这两个事件中实际看到了未设置样式的html标记，而在使用styled jsx的第二个示例中，情况并非如此两个演

我对样式化组件非常兴奋，如果不是因为这个，我很想使用它…
我使用next.js通用渲染库准备了两个示例项目。
第一个示例使用样式化组件作为解决方案，第二个示例使用css的默认解决方案，即样式化jsx。
这两个示例都包含完全相同的代码，复杂性最低。您很快就会看到，在styled components示例中，DOMContentLoaded事件和Load事件之间存在令人不安的延迟，用户在这两个事件中实际看到了未设置样式的html标记，而在使用styled jsx的第二个示例中，情况并非如此

两个演示都使用Zeit now在线托管：
1-
2-

github上提供的源代码：
1-
2-

我非常感谢任何关于为什么它发生在其中一个而不是另一个的见解，当然，还有任何修改这种行为的方法，因为我喜欢使用样式化组件，因为它有很多特性和优点

谢谢你
半开的

：）

这里缺少的是服务器上的样式注入。基本上，当您使用JavaScript编写样式时，您必须在服务器上获取生成的样式，并将它们作为

style

标记注入到生成的HTML中

Next的内置解决方案会自动为您实现这一点，使用

样式化组件

，您需要做一点手动工作，并添加一个

pages/\u document.js

文件，如下所示：

import Document, { Head, Main, NextScript } from 'next/document'
import { styleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps ({ renderPage }) {
    const page = renderPage()
    const styles = (
      <style dangerouslySetInnerHTML={{ __html: styleSheet.rules().map(rule => rule.cssText).join('\n') }} />
    )
    return { ...page, styles }
  }

  render () {
    return (
      <html>
        <Head>
          <title>My page</title>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

从'next/Document'导入文档，{Head，Main，NextScript}
从“样式化组件”导入{styleSheet}
导出默认类MyDocument扩展文档{
静态异步getInitialProps（{renderPage}）{
const page=renderPage（）
常量样式=(
rule.cssText.join（'\n'）}/>
)
返回{…页面，样式}
}
渲染（）{
返回(
我的页面
)
}
}

注意我们是如何使用

样式化组件中的样式注入样式标记的。这就是它的全部，现在，未格式化内容的闪光消失了 以下是将样式化组件与next一起使用以避免问题的建议方法：

从“下一个/文档”导入文档
从“样式化组件”导入{ServerStyleSheet}
导出默认类MyDocument扩展文档{
静态异步getInitialProps（ctx）{
const sheet=new ServerStyleSheet（）
const originalRenderPage=ctx.renderPage
试一试{
ctx.renderPage=（）=>
原始渲染图({
增强应用程序：（应用程序）=>（道具）=>
sheet.collectStyles（），
})
const initialProps=wait Document.getInitialProps（ctx）
返回{
…初始道具，
风格：(
{initialProps.style}
{sheet.getStyleElement（）}
),
}
}最后{
页.印章()
}
渲染（）{
返回(
我的页面
)
}
}

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

try {
  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) =>
        sheet.collectStyles(<App {...props} />),
    })

  const initialProps = await Document.getInitialProps(ctx)
  return {
    ...initialProps,
    styles: (
      <>
        {initialProps.styles}
        {sheet.getStyleElement()}
      </>
    ),
  }
} finally {
  sheet.seal()
}
render () {
return (
  <html>
    <Head>
      <title>My page</title>
    </Head>
    <body>
      <Main />
      <NextScript />
    </body>
  </html>
)

 }
}