prerendering和ssr均通过服务端生成完整html提升首屏性能，但prerendering在构建时静态快照，适用于首页等低频更新页面；ssr则在请求时动态直出，适合需个性化或实时数据的页面。
直接在服务端生成完整 HTML 内容，让浏览器一收到就能渲染出首屏，跳过 JS 下载、解析、挂载的等待过程——这是 Prerendering 和 SSR 提升首屏性能的核心逻辑。两者目标一致，但适用阶段和实现方式不同：Prerendering 适合静态或低频更新页面，SSR 更适合动态、个性化内容。
Prerendering：为静态页“提前快照”
Prerendering 是构建时（build time）把指定路由预先渲染成 HTML 文件，部署后直接由服务器返回，零服务端计算开销。适合首页、关于页、产品介绍等不依赖用户状态的内容。
- Vue + Vite 项目可使用 vite-plugin-prerender：配置需要快照的路由（如 ['/', '/about']），构建时自动启动无头浏览器生成 HTML
- React 项目常用 react-snap 或 Next.js 的 Static Generation（SSG） 模式，配合 getStaticProps 预取数据并生成静态 HTML
- 注意避开依赖 window、localStorage 或实时 API 的代码；可在组件中用 typeof window !== 'undefined' 做运行时保护
SSR：为动态页“实时直出”
SSR 在每次请求时，由 Node.js 服务实时执行前端框架代码，注入数据后生成 HTML 字符串返回。适合需个性化、登录态或频繁更新的页面，比如用户中心、搜索结果页。
- 优先选用成熟框架封装方案：Next.js（React） 的 getServerSideProps，Nuxt（Vue） 的 asyncData 或 useAsyncData，SvelteKit 的 load 函数
- 确保服务端只获取首屏必需数据，避免拉取全量列表或无关字段；设置合理的超时与降级策略（如 fallback 数据或 loading 占位）
- 禁用浏览器专属 API 调用：不要在组件顶层或 setup 中直接访问 document、location；改用框架提供的生命周期钩子（如 onMounted）或服务端条件判断
关键优化动作不能少
无论选 Prerendering 还是 SSR，光有 HTML 直出还不够，得配合资源调度和缓存设计才能真正压低 FCP。
- 精简首屏 HTML：内联关键 CSS，移除非必要 script 标签，用 提前加载字体和核心样式
- 代码分割 + 懒加载：用 React.lazy 或 defineAsyncComponent 拆分非首屏组件；Webpack/Vite 开启 splitChunks 提取 React、Lodash 等公共依赖
- 多层缓存协同：静态页走 CDN 缓存（TTL 数小时）；SSR 页面可在 Nginx 或边缘网络（如 Cloudflare）做 URL 级缓存；个性化部分用 ESI 或客户端异步填充
怎么选：Prerendering 还是 SSR？
看内容变更多少、是否需用户上下文、运维能力是否跟得上。
- 博客文章、营销落地页、文档站点 → 优先 Prerendering / SSG，简单、稳定、CDN 友好
- 电商商品页（库存/价格实时）、后台系统、带登录态的仪表盘 → 必须 SSR，保证数据新鲜和权限控制
- 混合策略更常见：首页 SSG，详情页 SSR，评论区 CSR + SWR 按需拉取
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
