Next.js+React项目如何在SSR初始渲染阶段加载SCSS避免首屏无样式闪烁？

你遇到的数毫秒无样式裸渲染（FOUC），并非是SCSS配置不符合官方要求导致的。Next.js默认的生产环境样式加载策略，是将所有SCSS编译后的样式抽离为独立的静态CSS资源，在客户端JS完成水合流程时才动态注入到页面头部，天然会存在样式加载晚于HTML文本渲染的间隙。以下方案完全适配你当前项目已上线就绪、保留全部独立SCSS文件结构的状态，不需要将样式改造为styled-jsx这类内联组件方案：

可直接落地的操作步骤 #

• 开启框架内置的样式内联SSR配置
  不需要修改任何现有SCSS文件的引用逻辑，直接在next.config.ts中开启样式内联能力：

  const nextConfig = {
    experimental: {
      inlineCss: true
    }
  }
  module.exports = nextConfig
  

  开启后Next.js会自动将SCSS编译后的内容，直接以<style>标签的形式内联到SSR返回的HTML字符串中，浏览器解析初始HTML时就会同步加载样式，从根源上消除首屏裸渲染阶段。该配置对Pages Router、App Router的内置SCSS支持链路完全兼容，不会破坏现有样式加载的运行时逻辑。

• 低版本项目的兼容适配方案
  如果使用的Next.js版本过低不支持inlineCss配置，可以自定义_document.tsx文件，将首屏场景下的公共布局、首屏页面用到的SCSS提前通过sass工具预编译为纯CSS字符串，手动以<style>标签插入到页面Head位置。整个过程不需要改动现有SCSS文件的业务引用逻辑，只是为SSR初始HTML补充首屏必需的样式内容，后续非首屏的样式代码分割、按需加载逻辑完全不受影响。

• 无全量内联需求的折中优化
  如果顾虑全量内联SCSS会增大初始HTML体积，可以对抽离出的首屏独立CSS资源添加高优先级预加载标记，让浏览器在解析HTML的最早期就并行发起CSS资源请求，将样式加载的等待间隙压缩到用户完全感知不到的程度，无需改动现有SCSS目录结构。

注意：以上所有方案均不需要替换你现有的SCSS技术栈，不会对现有项目的业务代码、上线流程造成侵入性影响。

内容的提问来源于stack exchange，提问作者Subodh Pradhan