Next.js结合styled-components与SWC时样式加载异常及屏幕闪烁问题

你遇到的是**FOUC（无样式内容闪烁）**问题——页面加载或重载时，纯HTML先显示，等样式加载完成后才正常渲染，虽说只有几毫秒，但确实挺闹心的。

问题原因 #

用styled-components配合Next.js时，如果没正确配置服务端渲染（SSR）的样式提取逻辑，服务端返回的HTML里不会内嵌样式，浏览器先渲染裸HTML，等客户端styled-components生成样式后才会应用，就出现了这个闪烁问题。

解决步骤 #

• 安装依赖插件
  先确保babel-plugin-styled-components已安装，执行命令：

  npm install babel-plugin-styled-components --save-dev
  

  用yarn的话：

  yarn add babel-plugin-styled-components --dev
  

• 配置Babel
  在项目根目录创建或修改.babelrc文件，添加如下配置：

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

• 配置自定义_document.js
  在pages目录下新建或修改_document.js，添加服务端样式提取逻辑：

  import Document, { Html, Head, Main, NextScript } 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 />
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      )
    }
  }
  

• 确认next.config.js配置
  你当前的配置已经开启了styled-components编译器支持，这部分无需修改，确保配置如下即可：

  /** @type {import('next').NextConfig} */
  
  const nextConfig = {
    reactStrictMode: true,
    compiler: {
      styledComponents: true,
    },
    images: {
      unoptimized: true,
    },
  }
  
  module.exports = nextConfig
  

完成以上配置后，重启开发服务器，页面加载时服务端会把styled-components生成的样式内嵌到HTML的<head>中，浏览器渲染时能直接读取样式，就不会再出现无样式内容闪烁的情况了。

内容的提问来源于stack exchange，提问作者Ton Almeida