前端项目常见的渲染方式主要有以下几种，每种方式有其适用场景和优缺点：
1. 客户端渲染（CSR, Client-Side Rendering）
原理 ：
页面的HTML基本为空或只有一个根节点，所有内容和逻辑都通过JavaScript在浏览器端动态生成。常见于React、Vue、Angular等SPA（单页应用）。
优点：
- 前后端分离，开发体验好
- 页面切换快，用户体验流畅
- 适合交互复杂的应用
缺点：
- 首屏加载慢（需要下载JS后再渲染）
- SEO不友好（爬虫抓取不到内容，需额外处理）
代表框架：React、Vue、Angular
2. 服务端渲染（SSR, Server-Side Rendering）
原理 ：
页面内容在服务器端生成好HTML，直接返回给浏览器，浏览器只需渲染HTML即可看到完整页面。可以配合前端框架实现"同构渲染"。
优点：
- 首屏加载快，用户体验好
- SEO友好，爬虫能抓取内容
缺点：
- 服务器压力大
- 开发复杂度提升（需处理同构/水合等问题）
代表框架：Next.js（React）、Nuxt.js（Vue）
3. 静态站点生成（SSG, Static Site Generation）
原理 ：
在构建时（build time）将所有页面预先生成静态HTML文件，用户访问时直接返回静态文件。
优点：
- 性能极佳，访问速度快
- 服务器压力小，易于部署
- SEO友好
缺点：
- 不适合频繁变动的数据
- 构建时间随页面数量增加
代表框架：Next.js、Nuxt.js、Gatsby、Hexo
4. 增量静态生成（ISR, Incremental Static Regeneration）
原理 ：
结合SSG和SSR的优点，部分页面静态生成，部分页面按需在服务端生成并缓存。
优点：
- 兼顾性能和实时性
- 适合内容更新频率不一的场景
代表框架：Next.js（支持ISR）
5. 混合渲染（Hybrid Rendering）
原理 ：
同一个项目中，不同页面或组件采用不同的渲染方式（如首页用SSR，详情页用SSG，后台用CSR）。
优点：
- 灵活应对不同业务需求
- 充分利用各种渲染方式的优点
代表框架：Next.js、Nuxt.js
6. 传统多页应用（MPA, Multi-Page Application）
原理 ：
每个页面都是独立的HTML文件，页面跳转会重新加载资源。常见于早期的JSP、PHP、ASP.NET等。
优点：
- 实现简单，SEO友好
- 适合内容型网站
缺点：
- 用户体验不如SPA
- 页面切换慢
总结表格
| 渲染方式 | 首屏速度 | SEO | 适用场景 | 代表框架 |
|---|---|---|---|---|
| CSR | 慢 | 差 | 交互复杂 | React/Vue/Angular |
| SSR | 快 | 好 | 首屏重要 | Next.js/Nuxt.js |
| SSG | 极快 | 好 | 内容型 | Next.js/Gatsby |
| ISR | 快 | 好 | 内容频繁更新 | Next.js |
| Hybrid | 取决于配置 | 好 | 复杂业务 | Next.js/Nuxt.js |
| MPA | 一般 | 好 | 传统网站 | JSP/PHP/ASP.NET |