一、前端架构模式
前端架构模式指的是前端应用在结构和交互层面上的整体组织方式，主要涉及页面的组织形式、路由管理方式、数据交互机制等核心方面
现代前端架构模式主要有两种：单页面应用（SPA）和多页面应用（MPA）。两者在开发体验、用户体验以及技术实现上各有特点和适用场景
1. 单页面应用（SPA）
SPA 是指整个应用只有一个 HTML 页面，所有的交互和路由都是通过 JavaScript 动态加载和渲染的。
在加载时需要获取所有资源，所以首次加载时间较长，但是加载完成之后的体验非常流畅，不需要重新加载页面。
由于 SPA 采用客户端渲染（CSR），页面内容依赖 JavaScript 执行后才会显示，部分搜索引擎（尤其是轻量爬虫）可能抓取不到这些动态内容，影响 SEO。为改善这一问题，常结合 SSR 或 SSG 提前生成 HTML 内容，提升爬虫友好性。
2. 多页面应用（MPA）
MPA 是指每个页面都是一个独立的 HTML 页面，用户在不同页面之间切换时会重新加载整个页面。
加载速度通常比 SPA 更快，因为只需要加载当前页面所需的资源，但是切换页面体验较差，因为需要重新加载。
MPA 架构天然适合 SEO，特别是结合 SSR 或 SSG 渲染方式时，每个页面都能预生成完整 HTML。但传统 MPA 的开发体验不如 SPA，现代前端也支持使用路由分割、组件共享等方式提升其开发效率。
此外，MPA 也可以在每个独立页面中使用 CSR 技术实现局部动态功能，例如评论区、图表组件、交互模块等内容，可以用 JavaScript 动态加载，提升用户体验。
二、页面渲染方式
页面渲染方式是指在 Web 开发中，数据与 HTML 模板如何结合生成最终网页内容的方式。主要区别在于数据获取的时机（构建时、请求时、浏览器端）和渲染位置（服务端或客户端）。常见的渲染方式包括：SSR、SSG 和 CSR。
1. 服务端渲染（SSR）
用户请求页面时，服务器发送完整的 HTML 页面，浏览器直接渲染。待加载完成后，再进行客户端的动态交互。
首屏加载快，但是也导致服务器压力大，因为要每个页面都要计算一次。
2. 静态生成（SSG）
SSG 是指在构建时将页面预先生成为静态内容，用户请求时直接提供这些文件，没有服务端渲染和数据库查询的延迟
SSG 在构建阶段生成静态 HTML 文件，部署后可通过 CDN 提供极快的访问速度和优秀的 SEO 表现。适用于内容较固定、更新频率低的页面，如博客、文档等。
SSG 也并非完全固定，对于需要获取数据的内容，可以在构建时调用 API 接口获取数据并生成静态页面。
对于需要部分动态数据的场景，可通过“静态页面 + 客户端渲染（CSR）”的组合方式实现，例如使用 useEffect 或客户端 API 请求加载评论、点赞数等非关键性数据，从而在不影响首屏体验和 SEO 的前提下，引入交互性。
3. 客户端渲染（CSR）
由 JavaScript 在浏览器中动态生成的内容
CSR（客户端渲染）模式下，页面初始只包含一个 HTML 骨架，主要内容通过 JavaScript 加载并插入 DOM。尽管现代搜索引擎（如 Google）对 JavaScript 的支持不断增强，但仍存在部分内容无法及时抓取的风险，特别是在首屏内容依赖异步数据的情况下。因此，只有完全采用 CSR 的页面或组件会影响 SEO，而局部使用 CSR 并不会影响整体页面的可抓取性。
虽然我们常说 CSR 与 SPA 密切相关，但其实 CSR 是一种渲染方式，并不依赖于具体的架构模式。MPA 同样可以在页面中结合客户端渲染技术，例如用 JavaScript 动态加载部分内容、实现组件级的交互逻辑等。
因此，CSR 不等于 SPA，CSR 可以存在于 SPA 和 MPA 中，区别在于它是“全页渲染”还是“局部渲染”。
三、 混合渲染
现代框架都可以混合使用页面渲染方式，结合 SSR、SSG 和 CSR 的优点。
就按我用的 Astro 来说，Astro 允许你在同一个项目中灵活使用 SSR、SSG 和 CSR。
主要内容使用 SSG 构建时获取数据生成页面，速度最快，SEO最好。如评论数据，浏览量数据可以使用 CSR 动态加载。
这种混合渲染的方式结合了三者优点，成为构建现代 Web 应用的主流模式。
四、总结
- SPA 更适合交互密集型的应用，MPA 更适合内容型网站；
- CSR 提供灵活的用户体验，但对 SEO 不利；
- SSR 和 SSG 提升首屏性能和 SEO 表现；
- 混合渲染是现代框架的主流趋势，按需选择最适合的渲染策略才是关键。
评论