Skip to content

[Bug]: [V3]根路由为 client component 时,首屏缺少页面 CSS 注入 #8504

@l86110

Description

@l86110

版本信息

System:
  OS: macOS 26.0.1
  CPU: Apple Silicon (arm64)
  Node: v22.14.0

Browsers:
  Chrome: 146.0.7680.165

npmPackages:
  @modern-js/app-tools: 3.1.1
  @modern-js/plugin-bff: 3.1.1
  @modern-js/runtime: 3.1.1
  @modern-js/server-runtime: 3.1.1

问题详情

这个问题看起来和 #8430 的 client-only route RSC 优化有关(3.0.5之后的版本才会)。

场景

项目开启了 RSC(server.rsc = true),路由结构如下:

  • src/routes/layout.tsx:Server Component
  • src/routes/page.tsx:Client Component('use client'
  • src/routes/page.tsx 引入了 ./page.module.less

实际表现

直接打开 / 时:

  • 页面内容可以正常渲染
  • DOM 上能看到 CSS Modules 的 className
  • 但样式没有生效
  • 首屏 HTML 的 <head> 中没有注入当前页面对应的 CSS <link>

但如果先进入其它页面,再通过客户端导航回 /

  • CSS 会被正常加载
  • 页面样式恢复正常

期望行为

直接打开 / 时,首屏 HTML 应该正确注入当前路由对应的 CSS,页面样式应正常生效。

我这边的观察

  • route manifest 中已经包含了 page 路由对应的 CSS 资源
  • 说明资源本身是存在的
  • 问题更像是首屏渲染时没有把该 CSS 注入到 HTML 中
  • 而客户端导航链路能够正常补注入 CSS

临时规避方式

我这边把 src/routes/page.tsx 从“整页 client component”
改成了“server page + client 子组件”之后:

  • / 首屏 HTML 会正确带上页面 CSS
  • 页面样式恢复正常

所以我怀疑这是首屏 CSS 注入逻辑在“server layout + client root page”这个场景下的处理问题。

复现链接

暂无

复现步骤

1、开启RSC
2、layout为RSC,/ 对应的page.tsx 为 纯 客户端组件
3、打开 / 未加载样式

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions