[web基础]前端的技术选型CSR和SSR目前主流最佳实践

其实先有SSG和CSR，然后才有SSR【只是一种对用户体验的极致追求而已，或者说想尽力用技术优化体验去提高留存】

• 【SSR 是 “Server-Side Rendering” 的缩写，中文叫 服务端渲染】
  • 指在服务器端将Vue组件渲染成HTML字符串，然后直接发送给浏览器，浏览器接收到这个HTML后可以直接显示页面内容。
• 【CSR 是 “Client-Side Rendering” 的缩写，中文叫 客户端渲染】

SSR与传统的CSR（Client-Side Rendering，客户端渲染） 形成对比：

• CSR：服务器发送一个几乎空的HTML文件和JavaScript包，浏览器下载后执行JavaScript来渲染页面
• SSR：服务器发送已经渲染好的完整HTML页面，浏览器可以直接显示

很显然：CSR的问题：

1. 用户先看到一个空白页面
2. 等待JS下载并执行
3. 然后才看到时间显示
4. SEO不友好：搜索引擎爬虫看到的是空页面

1、何时使用SSR？

使用SSR当：

• 需要更好的SEO
• 首屏加载速度至关重要
• 用户网络环境较差（如移动端）

不需要SSR直接使用CSR

• 内部管理系统（不需要SEO）
• 对首屏速度要求不高
• 希望架构简单，部署方便

2、当前主流认知的最佳实践

百度、谷歌、小红书、微博等大型内容/搜索平台，必定在其核心的、对SEO和首屏速度敏感的业务场景中，将SSR作为关键技术方案（甚至是最佳实践）。但同时，它们会采用包含SSG、CSR等在内的混合渲染架构，以实现性能、成本与体验的最佳平衡。

1、内容生态基本上都是SSR了

现代主流大型网站，尤其是内容驱动或依赖搜索曝光的平台，服务端渲染（SSR）已成为核心技术的默认选择或重要组成部分。但实际情况比“全用SSR”更为复杂和精细化。

2、交互复杂、私密性强、无需SEO防止SEO使用CSR

CSR（客户端渲染）：用于交互复杂、私密性强的页面，如用户个人中心、管理后台、单页应用。这些页面无需SEO

1、滴滴打车界面、外卖下单页（Web 端） 页面主要交互，不需要被搜索引擎收录

2、微信小程序 小程序运行在客户端环境，天然是 CSR

3、永不或很少变化的页面使用纯静态文件：SSG (Static Site Generation)

3、可能精细化的做机制优化：SSG，但是其实现实应该很少，感觉没啥必要

特性	SSG (Static Site Generation)	SSR (Server-Side Rendering)
生成时机	构建时 (npm run build)	请求时 (用户访问时)
部署产物	静态HTML、CSS、JS文件	需要运行Node.js等服务器的应用
性能	极致（CDN分发，无服务器计算）	优秀（服务端渲染，首屏快）
使用场景	博客、文档、营销页面、产品介绍等内容不变或更新不频繁的页面	用户面板、社交信息流、电商列表等高度动态、个性化的页面
基础设施	简单、便宜（只需静态文件托管/CDN）	复杂、昂贵（需要维护可运行的服务器）

SSG是“预渲染”，SSR是“实时渲染”。它们都是服务端渲染（广义）的重要分支，共同构成了现代高性能Web应用的技术基石。

SSG（静态站点生成）：用于永不或很少变化的页面，如“关于我们”、帮助文档。它在构建时生成纯HTML，性能最优。