14.JS学习篇-CSR和SSR

在前端开发中，CSR（Client-Side Rendering，客户端渲染）和 SSR（Server-Side Rendering，服务端渲染）是两种不同的渲染方式。

一、CSR（客户端渲染）

1.工作原理：

• 浏览器首先下载一个 HTML 页面，这个页面通常只包含基本的 HTML 结构和一些加载 JavaScript 脚本的标签。
• 当页面加载完成后，JavaScript 脚本开始运行，从服务器获取数据（通常通过 API 请求）。
• 然后，JavaScript 框架（如 React、Vue.js 等）使用获取到的数据在客户端生成页面的最终内容，并将其插入到 HTML 页面中进行展示。

2.优点

• 更好的用户体验：页面可以在加载初始 HTML 后快速显示一些基本内容，然后随着 JavaScript 的加载和数据的获取逐渐变得更加丰富和交互性强。
• 分离关注点：前端和后端可以独立开发，开发效率较高。
• 易于部署：只需要部署静态资源和后端 API，相对简单。

3.缺点

• SEO 不友好：搜索引擎爬虫在抓取页面时，可能无法执行 JavaScript，因此无法看到完整的页面内容，这会影响网站在搜索引擎中的排名。
• 首次加载时间较长：因为需要下载大量的 JavaScript 代码和数据，导致首次加载页面的时间较长。

以下是一些支持前端开发中 CSR（客户端渲染）的框架：React，Vue，Angular

二、SSR（服务端渲染）

1.工作原理：

• 当用户请求一个页面时，服务器接收到请求后，在服务器端运行前端框架，生成完整的 HTML 页面。
• 服务器将生成的 HTML 页面发送给浏览器，浏览器直接显示这个页面，无需等待 JavaScript 加载和数据获取。

2.优点

• SEO 友好：搜索引擎爬虫可以直接看到完整的页面内容，有利于提高网站在搜索引擎中的排名。
• 更快的首次加载时间：因为服务器已经生成了完整的页面，浏览器无需等待 JavaScript 加载和数据获取，所以首次加载时间较短。

3.缺点

• 服务器压力较大：服务器需要为每个请求生成完整的 HTML 页面，这会增加服务器的负载。
• 开发复杂度较高：需要同时考虑前端和后端的开发，并且需要处理服务器端和客户端的状态管理等问题。

开发过程中，如果注重用户体验和开发效率，可以选择 CSR；如果注重 SEO 和首次加载时间，可以选择 SSR。也可以考虑采用混合渲染的方式，结合两者的优点，以达到更好的效果。