1.0 SSR的定义与含义

Server-Side Rendering（SSR）是一种前端开发技术，它允许服务器生成初始HTML页面，然后将其发送给客户端。这种技术通过减少客户端需要处理的数据量，提高了页面加载速度和搜索引擎优化（SEO）的效果。

2.0 SSR与传统客户端渲染的区别

2.1 客户端渲染(CSR)缺点分析

SEO不友好：由于CSR是由浏览器执行JavaScript代码生成内容，所以搜索引擎无法直接抓取到完整网页内容。

首屏时间长：CSR通常需要等待所有资源加载完毕后再开始渲染，这会导致首屏加载时间较长。

用户体验差：用户在看到空白页面的情况下进行交互，直到所有资源完成下载并开始渲染，这会降低用户体验。

2.2 SSR优势介绍

提高SEO：SSR可以提供一个完整的HTML文件供搜索引擎爬虫抓取，从而改善网站在搜索结果中的排名。

加快首屏展示：通过预先生成静态HTML，SSR能够立即显示初始界面，无需等待额外脚本或样式表加载。

改善用户体验：对于那些依赖于JavaScript动态添加内容的大型应用来说，快速呈现基本结构有助于提升初次访问者的满意度。

3.0 SSR工作流程简述

当用户请求一个带有SSR支持的Web应用时，其背后的服务器将按照以下步骤响应：

路由匹配 - 根据URL路径来确定要渲染哪个组件或模板。

数据获取 - 从数据库中检索必要的数据，并准备用于组件或者模板中使用。

模板替换 - 使用获取到的数据填充预设好的模板，以构建最终的HTML文档字符串。

发送至客户端 - 将准备好的HTML文档返回给客户机浏览器，即使这个过程发生在服务端也被称为“服务侧重绘”(Server-Side Rendering)。

一旦这些操作完成，就像普通网页那样，将这部分 HTML 发送到浏览器。这意味着大多数情况下，只有少量 JavaScript 需要从服务器上下载，而不是整个应用程序。这样做就能极大地加速首次加载时间，同时保持动态功能和交互性。