面试题：Next.js 按需加载 CSS 提升首屏速度时遇到样式闪烁问题如何解决

问题原因分析

CSS 加载时机：Next.js 按需加载 CSS 时，如果 CSS 在 HTML 渲染之后才加载完成，就会导致页面先以无样式状态呈现，然后样式突然加载，出现闪烁。
SSR 与客户端样式衔接：在服务器端渲染（SSR）场景下，服务器发送的 HTML 包含初始样式，但客户端重新渲染时，由于 CSS 按需加载机制，可能会重新计算和应用样式，这个过程中的不一致可能引发 FOUC。

解决方案

使用 Next.js 的内联 CSS
- Next.js 配置：在 pages/_app.js 文件中，可以通过 style jsx 进行内联 CSS 编写。例如：

import React from'react';

function MyApp({ Component, pageProps }) {
    return (
        <>
            <style jsx global>{`
                body {
                    font-family: Arial, sans-serif;
                }
            `}</style>
            <Component {...pageProps} />
        </>
    );
}

export default MyApp;

- **原理**：内联 CSS 会随着 HTML 一同发送到客户端，避免了额外的 CSS 文件加载延迟，从而减少 FOUC。

2. 使用 next - optimized - css 插件 - 安装：首先通过 npm install next - optimized - css 安装该插件。 - Next.js 配置：在项目根目录创建 next.config.js 文件（如果没有的话），并进行如下配置：

const withOptimizedCSS = require('next - optimized - css');

module.exports = withOptimizedCSS({
    // 其他 Next.js 配置
});

- **原理**：该插件会在构建时优化 CSS 加载，将关键 CSS 内联到 HTML 中，加快首屏样式渲染，减少 FOUC 问题。

3. 预加载 CSS - 加载策略：在 next.config.js 中，可以配置 webpack 进行 CSS 文件的预加载。例如：

module.exports = {
    webpack: (config, { isServer }) => {
        if (!isServer) {
            config.module.rules.push({
                test: /\.css$/,
                use: [
                    {
                        loader: 'next - css - loader',
                        options: {
                            // 配置预加载
                            preload: true
                        }
                    }
                ]
            });
        }
        return config;
    }
};

- **原理**：预加载 CSS 文件，使得在页面渲染之前，浏览器就开始加载 CSS，确保样式能及时应用，减少 FOUC 发生的可能性。

星途面试题库

面试题：Next.js 按需加载 CSS 提升首屏速度时遇到样式闪烁问题如何解决

知识考点

面试题答案

问题原因分析

解决方案