前端渲染方式都有哪些以及区别和实现方法

一、前端常见渲染方式总览（先给全景）

前端渲染 = 页面 HTML 在哪里、什么时候生成

二、CSR（Client Side Rendering）

原理

• 服务端返回 空 HTML + JS

• 浏览器下载 JS

• JS 运行后生成 DOM

HTML → JS → Render

实现

• React / Vue SPA

• Vite / Webpack

<div id="app"></div>
<script src="bundle.js"></script>

优点

• 前后端分离

• 交互体验好

• 开发简单

缺点

• 首屏慢

• SEO 差

• 白屏时间长

适用

• 后台系统

• 内部系统

三、SSR（Server Side Rendering）

原理

• 服务端直接返回 完整 HTML

• 浏览器直接渲染

• JS 再接管（Hydration）

Server Render → HTML → Hydrate

实现

• Next.js

• Nuxt

• Vue SSR

优点

• 首屏快

• SEO 友好

缺点

• 服务端压力大

• 架构复杂

关键点

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 在哪里生成”。

到此这篇关于前端渲染方式都有哪些以及区别和实现方法的文章就介绍到这了,更多相关前端渲染方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！