-
Notifications
You must be signed in to change notification settings - Fork 409
[Bug]: [V3]根路由为 client component 时,首屏缺少页面 CSS 注入 #8504
Copy link
Copy link
Open
Description
版本信息
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 Componentsrc/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、打开 / 未加载样式
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels