styled-jsx在Next.js应用中解决FOUC问题的正确姿势

2025-05-29 01:51:10作者：盛欣凯Ernestine

在Next.js应用中使用styled-jsx时，开发者可能会遇到页面加载时的FOUC（Flash of Unstyled Content）问题，即样式短暂闪烁后才会正常显示。本文将深入分析这个问题的成因，并提供完整的解决方案。

问题现象分析

FOUC问题通常表现为：

页面首次加载时出现短暂的无样式状态
禁用JavaScript后样式完全不加载
仅在使用styled-jsx时出现，CSS模块则表现正常

根本原因

这个问题的核心在于缺少styled-jsx的样式提供者（Style Registry）。在Next.js应用中，styled-jsx需要特殊的服务端渲染处理才能确保样式被正确注入到HTML中。

完整解决方案

1. 创建样式提供者组件

首先需要创建一个全局的样式提供者组件，用于收集和管理所有styled-jsx样式：

// app/registry.tsx
import { ReactNode } from 'react'
import { createStyleRegistry, StyleRegistry } from 'styled-jsx'

const registry = createStyleRegistry()

export default function StyledJsxRegistry({ children }: { children: ReactNode }) {
  return <StyleRegistry registry={registry}>{children}</StyleRegistry>
}

2. 在根布局中包裹应用

然后在应用的根布局中使用这个提供者：

// app/layout.tsx
import StyledJsxRegistry from './registry'

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html>
      <body>
        <StyledJsxRegistry>{children}</StyledJsxRegistry>
      </body>
    </html>
  )
}

3. 正确使用styled-jsx语法

确保在组件中使用正确的styled-jsx语法：

export default function Page() {
  return (
    <div>
      <h1 className="title">Hello World</h1>
      <style jsx>{`
        .title {
          color: red;
        }
      `}</style>
    </div>
  )
}