ssr和ssg能从根本上消除白屏等待时间,因其将页面内容生成提前至服务端或构建阶段,用户直接获得含真实内容的完整html而非空壳页面。

SSR 和 SSG 能从根本上消除白屏等待时间,是因为它们把“页面内容生成”这个动作从浏览器里提前到了服务端或构建阶段——用户拿到的不再是空壳 HTML 加一堆 JS,而是已经包含真实内容的完整 HTML 页面。
SSR:服务端实时生成带内容的 HTML
传统客户端渲染(CSR)中,浏览器先拿到一个只有 <div id="app"></div> 的空白 HTML,再下载、解析、执行 JS,最后才挂载组件、拉数据、渲染内容。整个过程存在明显延迟窗口,就是白屏期。
SSR 则让 Node.js 服务在收到请求时,立即运行 Vue 组件逻辑,把当前路由对应的完整 DOM 结构(比如首页的 Header + Banner + 文章列表 + Footer)拼成 HTML 字符串,直接返回给浏览器。浏览器一收到就立刻开始绘制,无需等待 JS 加载执行。
一款AI工具,主要用于Monitor and clean up invalid Codex authentication files in CPA. Check quota status, disable files returning 401 errors, and perform dual verification before deletion.,适合需要提升相关任务效率的用户。
- 关键点在于:HTML 响应体里已含语义化内容,不是占位符
- 首屏关键内容(LCP 元素)在首个网络响应中就已存在
- TTFB 虽略高于纯静态资源,但远低于 CSR 的 FCP(首次内容绘制)耗时
SSG:构建时预生成全部 HTML 文件
SSG 更进一步——它不依赖运行时服务,而是在项目构建(如 vite build)阶段,就遍历所有可确定的路由路径(例如 /、/about、/posts/123),逐个执行组件、注入真实数据、生成对应的 .html 文件。
最终输出的 dist/ 目录里,index.html 就是首页的完整页面,打开即见内容。部署到 Nginx 或 CDN 后,用户访问时,服务器直接返回这个 HTML,毫秒级响应,零计算开销。
- 没有网络往返等待 JS 执行,也没有水合前的空白布局
- Footer 不会先贴着 Header,再突然被内容顶开——因为结构和内容天生一体
- 适用于路径固定、内容更新不频繁的场景,如官网、文档站、博客
它们共同绕开了 CSR 的三大瓶颈
白屏本质是浏览器在“等”:等 JS 下载、等 Vue 实例启动、等路由匹配、等组件加载、等数据请求返回。SSR 和 SSG 把这些“等”的环节大幅压缩甚至移除:
- 跳过 JS 解析执行阶段:HTML 本身已是最终视图,JS 只负责后续交互(hydration)
- 规避空节点占位导致的布局抖动:Header/Footer/Content 高度在 HTML 中已自然分配,无突变
- 让关键内容进入首个字节流:搜索引擎和用户几乎同时看到内容,FCP 接近 TTFB










