样式需要时间加载 - Next.js

问题描述 投票：0回答：4

当我输入我的作品集时，它会加载未样式化的 html 页面，并且仅在几秒钟后才会加载样式。我该如何解决这个问题？

注意：我正在使用样式组件

  1. 当我进入页面时：

  2. 几秒钟后：

我尝试寻找样式组件与 next.js 的兼容性，但找不到有关此错误的任何信息

next.js styled-components
4个回答
11
投票

作为 CSS-in-JS 样式解决方案，styled-components 适合客户端渲染，它通常假设它在浏览器中执行，因此它会根据 JavaScript 执行生成 CSS 样式，并将它们直接注入到文档中。在这种情况下，由于 Next.js 默认预渲染所有页面，因此您需要在服务器端渲染的 HTML 中使用 CSS 样式，以避免首次渲染时出现无样式内容的闪烁。

您可以按照以下步骤操作：

如果您使用 Next.js 12+（带有 SWC 编译器）：

修改

next.config.js
：

/** @type {import('next').NextConfig} */

const nextConfig = {
  // ...rest of options
  compiler: {
    styledComponents: true,
  },
}

module.exports = nextConfig

在 

_document.js
文件夹上创建自定义 
pages
文件并添加：

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()
    }
  }
}
3
投票

如果您将 Next 13+ 与 App Router 一起使用，则 _document.js 解决方案将不起作用。然后，您需要创建一个全局注册表组件来收集渲染期间的所有 CSS 样式规则。

在/app文件夹中添加registry.tsx

'use client';

import React, { useState } from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import {
  ServerStyleSheet,
  StyleSheetManager,
} from 'styled-components';

export default function StyledComponentsRegistry({
  children,
}: {
  children: React.ReactNode;
}) {
  // Only create stylesheet once with lazy initial state
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [styledComponentsStyleSheet] = useState(
    () => new ServerStyleSheet()
  );

  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement();
    styledComponentsStyleSheet.instance.clearTag();
    return <>{styles}</>;
  });

  if (typeof window !== 'undefined') return <>{children}</>;

  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      {children}
    </StyleSheetManager>
  );
}

然后导入它并在您的 app/layout.tsx 中使用。

import StyledComponentsRegistry from './lib/registry'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
      </body>
    </html>
  )
}

示例：https://github.com/vercel/app-playground/tree/main/app/styling/styled-components

2
投票

由于 Next.js 默认支持服务器端渲染，因此样式组件使用的 CSS-in-JS 方法可能无法按预期工作。默认情况下，Next.js 在将所有页面发送到客户端之前会在服务器上预渲染所有页面，这意味着 styled-components 生成的样式可能在初始 HTML 响应中不可用。

要解决此问题，您可以使用 

ServerStyleSheet
中的 
styled-components
类来收集应用程序中使用的所有样式，并将它们添加到服务器渲染的 HTML 响应中，方法是将以下内容添加到您的 
_document.js

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

function MyDocument(props) {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

MyDocument.getInitialProps = async (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();
  }
};

export default MyDocument;
0
投票

回答@BogdanOnu 的问题，在带有 TypeScript 的 Next.js 13+ 中，您可以使用以下示例来处理此问题：

import { ReactElement } from "react";
import { ServerStyleSheet } from "styled-components";
import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps } from "next/document";

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
    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()}
          </>
        ),
      } as any;
    } finally {
      sheet.seal();
    }
  }
  render(): ReactElement {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.