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

No one assigned

    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