Next.js二次刷新仅加载global.css，styled-components样式失效问题咨询

项目样式分为两部分实现：global.css全局样式，以及index.js中通过styled-components编写的组件样式。出现以下异常：

• 启动/重启本地服务器后首次手动刷新页面：所有样式正常生效，样式修改也能即时应用
• 再次手动刷新页面：仅global.css样式生效，index.js中的styled-components样式未加载
• 仅能通过两种方式恢复styled-components样式：点击页面内链接后返回，或重启本地服务器并刷新页面

• SSR场景下的样式缓存问题：如果是服务端渲染项目，服务端的样式收集逻辑可能存在缓存机制，首次请求时生成并注入了styled-components样式，但后续请求直接复用了旧的缓存内容，没有重新生成最新的样式代码，导致客户端接收到的HTML不包含组件样式，hydration阶段也未补全。
• 热更新（HMR）兼容性问题：开发环境中，styled-components的热更新插件与项目构建工具（如Webpack/Vite）的HMR配置冲突。首次加载是完整初始化流程，样式正常注入；第二次刷新时HMR未正确触发styled-components的样式重新生成与注入，导致样式丢失。
• 浏览器缓存异常：浏览器缓存了旧的客户端打包脚本，其中styled-components的样式注入逻辑存在缺陷。第二次刷新时加载缓存脚本，未执行新的样式注入逻辑，导致组件样式无法生效。可检查脚本的缓存控制头（如Cache-Control）是否设置了合理的过期策略。
• styled-components版本或配置错误：使用的styled-components版本与项目构建工具不兼容，或babel-plugin-styled-components配置有误。比如开启了SSR相关配置但未正确处理客户端 hydration，导致第二次刷新时样式编译或注入失败。

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