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

Question

我正在尝试使用 Nextjs 在 React 项目中实现 styled-components。问题是，虽然我可以实现并查看样式，但在浏览器上看到它时会有一点延迟。首先它加载没有样式的组件，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;

components/home.js

import React from "react";
import styled from 'styled-components';

const Title = styled.h1`
  color: red;
`;

function Home() {
  return (
    <div>
      <Title>My First Next.js Page</Title>
    </div>
  );
}

export default Home;

babel.rc

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

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

Answer 1

发生这种情况是因为您的样式正在客户端应用。您将需要遵循 Next.js 提供的示例中的 this modification。

您实际上需要创建一个 custom Document，使用 styled-components 提供的 ServerStyleSheet 从 <App /> 组件收集所有样式，并将它们应用到服务器端，所以当您的应用程序到达客户端时，样式已经存在。

正如他们在本示例的 README 中所述：

For this purpose we are extending the <Document /> and injecting the server side rendered styles into the <head>, and also adding the babel-plugin-styled-components (which is required for server side rendering).

希望这能解决您的问题。

Answer 2

这是 _document 文件的示例：

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

希望对您有所帮助！

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

Styled-components delay setting property in Nextjs

javascript

reactjs

server-side-rendering

next.js

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

Styled-components delay setting property in Nextjs

javascript

reactjs

server-side-rendering

next.js

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