如何为React SSR的renderToNodeStream输出块收集critical-css

问题1：流式渲染场景下的className高效收集 #

• 优先选择渲染阶段劫持收集方案，不需要解析HTML：
  自定义JSX运行时或者编写Babel插件，在服务端React.createElement执行时，直接提取所有元素的className属性值存入全局Set，该过程和React渲染同步执行，无额外解析开销，完全规避了不完整HTML片段的解析问题，性能远高于正则匹配。
• 如果无法修改渲染逻辑，可采用轻量流式标签解析：
  基于Node.js的Transform流实现仅解析HTML标签头部的逻辑，只处理<开头的片段匹配class="xxx"属性，不需要完成DOM树构建，解析效率比全量正则匹配高3~5倍，且不会匹配到标签外的内容。

问题2：安全插入内联CSS到HTML流的实现方式 #

核心原则是固定插入位，仅在React渲染流之外的预留位置插入样式：

1. 提前输出HTML前置模板，包括完整的<head>标签结构，在</head>之前插入专属占位注释<!-- __CRITICAL_CSS_PLACEHOLDER__ -->，这部分内容在React渲染流启动前就已经发送到客户端。
2. 用Transform流包裹renderToNodeStream的输出，仅当扫描到上述占位注释时，将已收集到的所有关键CSS包裹进<style id="ssr-critical-css">标签插入，后续所有流片段不再处理插入逻辑，完全避免样式标签插入到<svg>、React根节点内部等非法位置。

规避Hydrate异常的处理：
内联style标签统一放在<head>内，不属于React Hydrate的根节点范围，React不会对该节点做校验和移除，完全不会出现Hydrate不匹配问题。如果需要在客户端加载完全量CSS后清理内联样式，可在useEffect回调中通过id查找该节点删除即可。

额外性能优化建议 #

• 异步加载的非关键CSS可设置初始media="print"，加载完成后切换为media="all"，避免阻塞首屏渲染，同时避免FOUC问题。
• 可将关键CSS的最大体积控制在14KB以内，符合TCP慢启动的首次窗口大小，进一步降低首屏加载耗时。

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