页面渲染
SSR 服务器端渲染
SSR（Server Side Rendering，服务器端渲染）
是一种将页面的生成工作移到服务器端的技术，它可以提高页面的首屏加载速度、SEO 效果和用户体验
优点
1、首屏加载速度快
SSR 在服务器端生成页面并输出 HTML，所有可以在客户端接收到响应前就已经有一部分页面内容展示了出了，从而提高了首屏加载速度
2、SEO 优化效果好
由于搜索引擎主要抓取 HTML 文本，因此使用 SSR 可以将完整的 HTML 文本返回给搜索引擎，提高网站搜索排名和曝光率
3、用户体验更好
首屏加载速度快，用户可以更快地看到页面内容，从而提高了用户的满意度和留存率
缺点
1、服务器压力大
SSR 需要服务器端进行页面的生成和输出，因此会增加服务器的负载压力，需要考虑服务器性能和扩展性
2、开发成本高
SSR 需要在服务器端进行页面模板的编号和数据的获取，需要更多后端开发人力投入
实现
1、配置服务器环境
需要在服务器搭建 Node.js 环境，安装相关依赖模块
可以使用 Express 或 Koa 等 web 框架简化开发
2、创建服务器入口
创建一个服务器入口文件，通过监听 HTTP 请求并返回相应的 HTML 文本来实现 SSR
可以在入口文件中使用渲染引擎（如 EJS，Pug 等）来处理 HTML 模板，并将数据传递给模板进行渲染
3、配置路由
在服务器端配置路由，根据不同的请求路径返回相应的 HTML 文本
可以通过路由参数、查询字符串或 POST 请求等方式传递数据给服务器端进行处理
4、客户端脚本
在 HTML 文本中插入客户端脚本，用于处理后续的页面加护和异步请求
5、SEO 优化
为了优化 SEO 效果，需要在 HTML 文本中添加关键字、描述和标题等元数据，并且确保页面内容能够正常被搜索引擎抓取和解析
CSR 客户端渲染
CSR Client-Side Rendering 是前端开发中最常见的渲染方式，这种模式下，服务器负责提供静态的 HTML 文件（包含基本的 HTML 结构和 JavaScript 脚本），真正的页面渲染工作完全由客户端的浏览器来完成，这意味着页面内容是在用户的浏览器上动态生成的
优点
1、响应速度快
一旦 HTML 文件加载完成，浏览器就可以开始渲染页面，而不需要等待服务器返回完整的渲染结果
2、动态性强
页面渲染在客户端，可以方便地实现各种动态交互效果
3、前端部署简单
只需要一个静态服务即可部署前端代码，降低了部署成本
缺点
1、首屏加载时间长
2、不利于 SEO
搜索引擎爬虫可能无法很好地解析由 JavaScript 动态生成的页面内容，导致 SEO 效果较差
3、白屏时间
SSG 静态站点生成
SSG Static Site Generation 是一种在构建时生成静态 HTML 页面的技术
在这种模式下，开发者会编写一些模板文件和数据文件，然后使用构建工具（如 Hugo、Gatsby 等）将这些文件转换为静态的 HTML 页面
这些页面可以直接部署到服务器上，而不需要服务器进行实时渲染
优点
1、性能卓越
页面是静态的，无需等待服务器渲染，直接由浏览器加载显示，性能高
2、安全性高
服务器只提供静态文件，因此降低了遭受攻击的风险
3、适合内容型网站
对于内容更新不频繁的内容型网站，如博客、文档网站等，SSG 是一个很好的选择
缺点
1、动态性受限
页面是静态的，难以实现复杂的动态交互效果
2、构建时间长
对于大型网站，构建时间可能会比较长
3、不适合频繁更新
每次更新都需要重新构建并部署整个网站
参考
https://juejin.cn/post/7368777511952367642?searchId=202408182149372EC3CB4566469BB68A7C