Prerendering和SSR均通过服务端生成完整HTML绕过客户端JS执行链路来压低FCP；前者构建时静态快照适用于首页等低频更新页，后者请求时动态直出适用于需个性化或实时数据的页面。
预渲染（Prerendering）和服务端渲染（SSR）都能显著压低首屏内容绘制时间（FCP），核心在于绕过客户端 JS 下载、解析、执行和挂载的整个链路，让浏览器一收到 HTML 就能直接渲染出可视内容。
Prerendering：构建时快照，适合静态页
它在项目构建阶段，用无头浏览器访问指定路由（如 /、/about），把那一刻的完整 DOM 快照保存为静态 HTML 文件。部署后，Nginx 或 CDN 直接返回该文件，零服务端计算开销。
- 适用场景：首页、文档页、产品介绍页等内容稳定、更新频率低的页面
- 关键操作：配置白名单路由，避免在组件中调用 window、localStorage 或实时 API；可用 typeof window !== 'undefined' 做运行时保护
- 工具推荐：Vue + Vite 用 vite-plugin-prerender；React 项目可选 react-snap 或 Next.js 的 getStaticProps（SSG 模式）
SSR：请求时直出，适合动态页
每次用户发起请求，Node.js 服务实时执行前端框架代码，拉取首屏必需数据，生成带内容的 HTML 字符串再返回。用户看到的是“已经画好”的页面，FCP 通常控制在 300–800ms。
- 适用场景：需登录态、个性化推荐、搜索结果、实时价格等依赖用户或上下文的页面
- 关键操作：只获取首屏所需最小数据集；禁用顶层 document、location 调用；改用框架提供的服务端安全钩子（如 useAsyncData、getServerSideProps）
- 框架封装更省心：Next.js（React）、Nuxt（Vue）、SvelteKit（Svelte）都已内置 SSR 支持，无需从零搭 Node 渲染层
光有 HTML 还不够：必须配合资源调度与缓存
即使 HTML 直出，若 JS/CSS 加载阻塞、字体未优化、缓存策略缺失，FCP 仍可能被拖慢。
立即学习“Java免费学习笔记（深入）”；
- 对 Prerender 页面，启用 CDN 缓存或边缘缓存，命中即返回，不走源站
- 对 SSR 页面，建议加内存缓存（如 Node 进程内 Map）或 Redis 缓存，设置合理 TTL；高频但低变更多页（如商品详情）尤其适合
- 启用流式渲染（如 React 18 的 renderToPipeableStream），HTML 分块传输，用户更快看到顶部内容
- 确保关键 CSS 内联、JS 使用 defer 或 module，避免阻塞 HTML 解析
不复杂但容易忽略：Prerender 和 SSR 不是互斥选项，一个项目里可以混合使用——首页 prerender，用户中心 SSR，既保速度又保体验。
