仅调用renderToString不够，因首屏卡顿等问题源于服务端HTML与客户端hydration未对齐；必须注入window.__INITIAL_STATE__（≤5KB）、内联首屏CSS、defer加载JS，并确保DOM结构、状态、props完全一致。

为什么服务端渲染不能只靠 renderToString 就完事

光调用 renderToString 只是把 React 组件转成字符串，但首屏卡顿、高亮错位、执行按钮无响应这些现象，往往不是没渲染，而是“渲染了但没接住”。服务端吐出的 HTML 必须和客户端 hydration 完全对齐：比如编辑器光标位置、代码语言下拉选中值、是否已执行过结果——这些状态得通过 window.__INITIAL_STATE__ 注入，且体积控制在 5KB 内。超了会拖慢 TTFB；漏了会导致客户端重新 fetch 或重跑逻辑，白屏延长。

内联 CSS 到底该内联哪些样式

内联整站 CSS 是常见误区。真正该进 的，仅限首屏 DOM 渲染必需的部分：比如编辑器容器边框、默认代码块字体大小、语言切换按钮背景色。可用 critical npm 包提取，或手动跑一次首屏截图 + Chrome Coverage 工具定位未用样式。内联后必须压缩，去掉空格和注释；同时加 media 属性做条件隔离，例如 不会被桌面端解析。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

script 标签放

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！