前端常见渲染方式对比与实现详解

缺点

• 服务端压力大
• 架构复杂

关键点

Hydration（水合）

三、SSG（Static Site Generation）

原理

• 构建时生成 HTML
• 部署为静态文件

Build Time → HTML 

实现

• Next.js getStaticProps
• VitePress / VuePress

优点

• 性能极致
• 成本低

缺点

• 数据不实时

适用

• 文档
• 博客
• 官网

四、ISR（Incremental Static Regeneration）

原理

• 静态生成
• 按需更新部分页面

实现

revalidate: 60 

优点

• 静态性能
• 动态数据

缺点

• 架构复杂
• 平台依赖

五、Streaming SSR（流式渲染）

原理

• HTML 分块返回
• 边生成边展示

Header → Main → Footer 

实现

• React 18
• Suspense

优点

• 极快首屏
• 更好用户体验

缺点

• 实现复杂

六、同构渲染（Isomorphic）

一套代码，跑在客户端 + 服务端

• React / Vue 同构
• 核心是 SSR + CSR

七、Hybrid（混合渲染）

思路

• 不同页面用不同策略

实现

• Next.js App Router
• Nuxt 3

八、Edge Rendering（边缘渲染）

原理

• 在 CDN 节点渲染
• 靠近用户

实现

• Vercel Edge
• Cloudflare Workers

优点

• 延迟极低

九、对比总结表（面试必背）

十、选型建议（真实项目）

• 后台系统 → CSR
• 内容站点 → SSG / ISR
• 电商首页 → SSR + Streaming
• 超高性能 → Edge

十一、面试 1 分钟标准回答

前端常见渲染方式包括 CSR、SSR、SSG 和 ISR。 CSR 在浏览器生成 HTML，交互好但首屏慢； SSR 在服务端生成 HTML，首屏快且 SEO 友好； SSG 在构建时生成静态页面，性能最好但不实时。 实际项目中通常采用混合渲染策略。

十二、一句话终极总结

渲染方式的本质，是'HTML 在哪里生成'。