Javascript Nextjs中的样式化组件延迟设置属性_Javascript_Reactjs_Next.js_Server Side Rendering

Javascript Nextjs中的样式化组件延迟设置属性

javascript reactjs next.js

Javascript Nextjs中的样式化组件延迟设置属性,javascript,reactjs,next.js,server-side-rendering,Javascript,Reactjs,Next.js,Server Side Rendering,我正试图用Nextjs在React项目中实现样式化组件。问题是，尽管我可以实现和查看样式，但在浏览器上看到样式时会有一点延迟。首先加载不带样式的组件，22毫秒后应用样式。我做错了什么？谢谢这是我的密码 pages/index.js import React from "react"; import Home from "../components/home/index"; const index = () => { return ( <React.Fragment

我正试图用Nextjs在React项目中实现

样式化组件。问题是，尽管我可以实现和查看样式，但在浏览器上看到样式时会有一点延迟。首先加载不带样式的组件，22毫秒后应用样式。我做错了什么？
谢谢
这是我的密码
pages/index.js
import React from "react";
import Home from "../components/home/index";


const index = () => {
  return (
    <React.Fragment>
        <Home />
    </React.Fragment>
  );
};

export default index;

pages/_document.js
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();
    }
  }
}

从“下一个/文档”导入文档；
从“样式化组件”导入{ServerStyleSheet}；
导出默认类MyDocument扩展文档{
静态异步getInitialProps（ctx）{
const sheet=new ServerStyleSheet（）；
const originalRenderPage=ctx.renderPage；
试一试{
ctx.renderPage=（）=>
原始渲染图({
enhanceApp:App=>props=>sheet.collectStyles（）
});
const initialProps=wait Document.getInitialProps（ctx）；
返回{
…初始道具，
风格：(
{initialProps.style}
{sheet.getStyleElement（）}
)
};
}最后{
表1.seal（）；
}
}
}
发生这种情况是因为您的样式正在客户端应用。您需要遵循Next.js提供的示例
实际上，您需要创建一个，使用样式化组件提供的服务器样式表从
组件收集所有样式，并将它们应用到服务器端，这样当您的应用程序到达客户端时，样式就已经存在了
正如本例的自述文件中所述：
为此，我们扩展了
，并将服务器端呈现的样式注入
，还添加了babel插件样式的组件（这是服务器端呈现所必需的）
我希望这能解决您的问题。
以下是_文档文件的一个示例：
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet();

    function handleCollectStyles(App) {
      return props => {
        return sheet.collectStyles(<App {...props} />);
      };
    }

    const page = renderPage(App => handleCollectStyles(App));
    const styleTags = sheet.getStyleElement();
    return { ...page, styleTags };
  }

  render() {
    return (
      <html>
        <Head>{this.props.styleTags}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}


从'next/Document'导入文档，{Head，Main，NextScript}；
从“样式化组件”导入{ServerStyleSheet}；
导出默认类MyDocument扩展文档{
静态getInitialProps（{renderPage}）{
const sheet=new ServerStyleSheet（）；
函数handleCollectStyles（应用程序）{
返回道具=>{
返回表单。collectStyles（）；
};
}
const page=renderPage（App=>handleCollectStyles（App））；
const styleTags=sheet.getStyleElement（）；
返回{…页面，样式标签}；
}
render（）{
返回(
{this.props.styleTags}
);
}
}

我希望这有帮助
 谢谢Michalis，我有一个_document.js文件。我编辑了qs。你可以在那里看到。嗯，这很奇怪。如果您根据我提供的示例进行了任何更改，请重新启动您的应用程序。在再次运行纱线开发
之前，对\u document.js文件的任何编辑都不会应用。Michalis我一步一步地遵循您的示例，现在它可以工作了！我不知道是怎么回事。。我得调查一下。非常感谢你！很高兴我能帮忙：）我是德国人，谢谢！我尝试了你的例子，加载器时间从22毫秒减少到11毫秒，但是问题仍然存在……哦，太好了，你有代码的repo吗？我可以查看一下问题。我发现了问题，文件应该命名为_document.js，而不是_documents.js。只要重命名文件并将我的代码粘贴到你的_document.js中，它就会工作！我克隆了你的代码并做了那些更改，它成功了！让我知道。没问题：）很高兴我帮了忙！
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();
    }
  }
}

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

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet();

    function handleCollectStyles(App) {
      return props => {
        return sheet.collectStyles(<App {...props} />);
      };
    }

    const page = renderPage(App => handleCollectStyles(App));
    const styleTags = sheet.getStyleElement();
    return { ...page, styleTags };
  }

  render() {
    return (
      <html>
        <Head>{this.props.styleTags}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}