笔记来源：编程导航
1、什么是客户端和服务端渲染？
网站渲染可以在服务端和客户端两种环境下进行。
在客户端渲染（Client-Side Rendering，CSR）中，客户端（浏览器）会先向服务器请求 HTML 文件，服务器会返回一个基础的 HTML 文件，其中包含必要的 JavaScript 脚本。这些脚本在浏览器端运行，动态请求后端的数据、生成网页内容并渲染到页面上。
服务端渲染（Server-Side Rendering，SSR） 是一种将网页在 服务器端 生成并渲染为 HTML 内容的技术。在这种方式下，当用户请求一个网页时，服务器会提前调用后端，获取数据并生成完整的 HTML 文档，然后将其发送到客户端（浏览器）。浏览器接收到 HTML 后，直接展示页面内容，不用再动态地向后端发送请求来获取数据。
服务端渲染的工作流程通常如下：
- 用户发送请求到服务器
- 服务器处理请求，调用后端获取数据，并生成完整的 HTML 页面
- 服务器将生成的 HTML 页面返回给客户端（浏览器）
- 浏览器接收到 HTML 后，直接渲染页面
2、客户端和服务端渲染的区别？
客户端渲染和服务端渲染的主要区别在于渲染过程发生的地点。
由于 Ajax、Vue、React 等新技术的崛起，大多数网站都是基于客户端渲染实现的，客户端渲染的优点主要是：
- 开发方便灵活：开发者不需要区分哪些数据要在服务端加载、哪些数据要在客户端加载，也不用担心哪些 API 无法在服务端使用。便于实现更加复杂和动态的用户界面，适合构建单页应用（SPA）和需要频繁交互的应用。
- 减少服务器压力：由于渲染工作由客户端（用户自己的电脑）完成，因此服务器的负载相对较小，只需要提供静态资源（比如使用 Nginx 就能完成部署）。
比如一个网站的首页加载请求只有一个标题和一个 js 脚本。
随后执行脚本，触发后续的数据加载，逐渐加载显示整个页面。
而服务端渲染，服务端直接返回的就是 html 文档，就已经有完整的网站数据和样式了。
服务端渲染的好处是：
- 减少初始加载时间：SSR 页面可以在首次加载时展示完整内容，减少白屏时间，而 CSR 通常需要等待 JavaScript 加载和执行后才能展示内容。
- SEO 友好：SSR 更有利于 SEO，因为搜索引擎爬虫能够直接抓取完整页面的内容，而不依赖于 JavaScript 执行。
但相应的，SSR 将渲染任务交给服务器，可能会增加服务器的负载和压力。所以 SSR 更适合追求性能和 SEO 的企业级项目。
能够实现服务端渲染的技术很多，以前有 Java 的 JSP、PHP 等等，现在有基于 React 的 Next.js 和基于 Vue 的 Nuxt.js 框架。
3、其他渲染方式 - 静态网站生成
静态网站生成（Static Site Generation，SSG）是一种在构建阶段生成静态 HTML 文件的技术。与服务端渲染不同，静态网站生成是在构建时（而不是用户请求时）生成页面，所有页面都以静态文件的形式存在。
这种方式本质上也是客户端渲染，但是不需要由客户端再动态地向后端发送请求来获取数据，这些静态文件可以直接由内容分发网络（CDN）或静态服务器提供。
优点：
- 高性能：由于服务器仅需提供静态文件，性能极高；而且由于数据不变化，特别适合通过 CDN 缓存加速。
- SEO 友好：搜索引擎最喜欢的就是静态 HTML 文件，可以轻松索引并提升 SEO 效果。
- 简化基础设施：无需复杂的前后端交互逻辑，静态文件的部署和维护成本较低。
缺点：
- 动态内容有限：SSG 适合内容变化不频繁的场景，对于需要实时更新内容的网站，生成静态页面可能不够灵活。
- 构建时间：生成大量静态页面时，构建时间可能较长，特别是数据量大的时候。
基于这些优缺点，静态网站生成适合内容数量有限的、内容基本不变的网站，比如个人博客。像 VuePress、Hugo、Hexo、Astro 都是主流的静态网站生成器。
随着静态网站内容越来越多，每次构建会越来越慢，这种情况下，可以采用增量静态生成技术。
增量静态生成（Incremental Static Regeneration，ISR）允许部分页面在构建之后进行更新，而无需重新构建整个站点。这种技术适用于那些大多数内容不变、但某些部分需要动态更新的网站。
工作流程：
- 在构建阶段，生成初始的静态页面。
- 当页面内容更新时，通过配置的再生成间隔，静态页面可以增量更新，而不是重新生成整个站点，大幅减少构建时间。
- 用户请求时，如果页面内容过期或更新，则后台自动生成新的静态页面并缓存。
这样一来，可以在享受静态网站高性能、SEO 友好特性的同时，及时更新网站的内容，并减少构建时间。
不过缺点就是架构更复杂、维护成本更高。但值得一提的是，很多大型网站为了做 SEO 优化，专门把动态网站转为静态 HTML（静态化）。
4、结合使用（推荐）
实际情况下，前面讲到的几种方式可以结合使用。
比如 部分预渲染（Partial Prerendering，PPR）是一种将服务端渲染（或静态生成）与客户端渲染结合的技术。
工作流程：
- 在构建阶段或请求阶段，页面的静态部分预先渲染（如导航栏、页脚等）。
- 页面加载时，静态部分直接显示，动态部分由 JavaScript 在客户端加载并渲染。
- 通过水合（Hydration）过程，客户端的 JavaScript 接管已经渲染的静态内容，并继续处理动态交互。
这样一来，兼具了 SSR 的 SEO 友好和快速初始加载、以及 CSR 灵活动态交互的优点。
还有一个跟部分预渲染相似的概念叫 同构渲染 ，是指同一套代码可以在服务端和客户端运行，并在服务端渲染页面的初始内容，然后在客户端接管渲染和交互。
比如 Next 就可以实现同构渲染。
