服务端渲染和客户端渲染，你真的了解吗？一文全解

网页渲染有两种常见的模式：服务端渲染（SSR）和客户端渲染（CSR），这两种模式的概念、区分、优劣势、应用场景、对应的js库等等，你都门清吗？贝格前端工场带你详细了解。

一、SSR和CSR

网页渲染有两种常见的模式：服务端渲染（SSR）和客户端渲染（CSR）。

1. 服务端渲染（Server-Side Rendering，SSR）：

在服务端渲染模式下，服务器在接收到客户端请求后，会将页面的初始 HTML 内容生成并发送给客户端。客户端接收到 HTML 后，进行解析和渲染，最终呈现给用户。在这种模式下，页面的大部分内容在服务器端已经渲染完成，因此页面加载速度相对较快，并且对搜索引擎友好。但是，交互式的内容和功能需要等待客户端的 JavaScript 代码执行完成后才能实现。

2. 客户端渲染（Client-Side Rendering，CSR）：

在客户端渲染模式下，服务器返回一个基本的 HTML 页面结构和一些必要的 JavaScript 和 CSS 文件。然后，客户端的浏览器通过执行 JavaScript 代码来请求数据，并根据数据动态生成页面内容。这种模式下，页面的渲染过程主要由客户端的浏览器完成，可以实现更丰富的交互和动态内容。但是，初始加载时需要下载和执行大量的 JavaScript 代码，页面加载速度相对较慢，对搜索引擎的可访问性较差。

 

 

---

二、SSR渲染模式的过程和优缺点

服务端渲染（Server-Side Rendering，SSR）的过程如下：

1. 客户端发送请求：客户端浏览器发送页面请求给服务器。

2. 服务器处理请求：服务器接收到请求后，根据请求的路由和数据，执行相应的处理逻辑。

3. 数据获取和处理：服务器从数据库或其他数据源中获取所需的数据，并进行必要的处理和转换。

4. 模板渲染：服务器使用获取到的数据和事先定义好的模板引擎，将数据填充到模板中，生成完整的 HTML 页面。

5. 返回渲染结果：服务器将渲染好的 HTML 页面作为响应返回给客户端浏览器。

6. 客户端解析和渲染：客户端浏览器接收到 HTML 响应后，进行解析和渲染，最终呈现给用户。

 

 

SSR的优点包括：

1. 更快的首屏加载速度：由于服务器在渲染过程中已经将页面的大部分内容生成，用户在访问网站时可以快速看到页面的内容，提升了用户体验。

2. 更好的搜索引擎优化：搜索引擎可以直接获取到完整的 HTML 页面，可以更好地理解和索引网页内容，提高网站在搜索结果中的排名。

3. 更好的可访问性：由于服务器端已经生成了完整的 HTML 页面，即使客户端浏览器不支持 JavaScript 或 JavaScript 出错，用户仍然可以正常访问和浏览网页内容。

SSR的缺点包括：

1. 服务器压力较大：由于页面的渲染逻辑在服务器端执行，需要服务器进行更多的计算和处理，对服务器的性能要求较高。

2. 复杂的交互和动态内容有延迟：复杂的交互和动态内容需要等待客户端的 JavaScript 代码执行完成后才能实现，可能会有一定的延迟。

3. 开发复杂度较高：SSR 需要在服务器端和客户端进行不同的处理和逻辑，开发和维护的复杂度相对较高。

SSR通过在服务器端生成页面的初始 HTML 内容，提供了更快的加载速度和更好的搜索引擎优化，但也面临服务器压力大和开发复杂度高的挑战。在具体项目中，需要综合考虑需求和限制，选择合适的渲染模式。

在 SSR 模式下，服务器会执行页面的渲染逻辑，包括数据获取、模板渲染和路由处理等。服务器会将渲染好的 HTML 页面发送给客户端，客户端浏览器接收到 HTML 后，进行解析和渲染，最终呈现给用户。

---

三、CSR渲染模式的过程和优缺点

客户端渲染（Client-Side Rendering，CSR）的过程如下：

1. 客户端发送请求：客户端浏览器发送页面请求给服务器。

2. 服务器处理请求：服务器接收到请求后，返回一个包含基本 HTML 结构和 JavaScript 的响应。

3. 客户端下载资源：客户端浏览器接收到响应后，开始下载所需的 JavaScript 文件和其他静态资源。

4. 客户端执行 JavaScript：客户端浏览器解析并执行下载的 JavaScript 文件，生成页面的 DOM 结构。

5. 数据获取和处理：客户端通过 JavaScript 发起异步请求，从服务器获取所需的数据。

6. 模板渲染和内容填充：客户端使用获取到的数据，通过 JavaScript 操作 DOM，将数据填充到页面中的相应位置。

7. 页面展示：客户端浏览器根据最终的 DOM 结构和样式，渲染并展示页面给用户。

CSR的优点包括：

1. 更快的页面切换速度：由于只需要获取基本的 HTML 结构和 JavaScript 文件，页面切换时可以更快地加载和渲染。

2. 减轻服务器压力：服务器只需提供基本的 HTML 结构和 JavaScript 文件，不需要进行页面渲染和数据处理，减轻了服务器的压力。

3. 适用于复杂的交互和动态内容：通过异步请求和前端 JavaScript 处理，可以实现复杂的交互和动态内容，提供更好的用户体验。

CSR的缺点包括：

1. 首屏加载速度较慢：由于需要下载和执行 JavaScript 文件，页面的首次加载速度相对较慢，用户可能在加载过程中看到空白页面。

2. 不利于搜索引擎优化：由于初次加载的页面内容较少，搜索引擎难以理解和索引页面的全部内容，对搜索引擎优化不友好。

3. 对浏览器兼容性要求较高：CSR 需要客户端浏览器支持 JavaScript，并且不同浏览器对 JavaScript 的解析和执行可能存在差异，对兼容性要求较高。

CSR通过在客户端浏览器执行 JavaScript，实现了快速的页面切换和复杂交互，但也面临首屏加载速度较慢和搜索引擎优化不友好的问题。在具体项目中，需要综合考虑需求和限制，选择合适的渲染模式。

---

四、SSR和CSR都有哪些对应的js库

SSR（Server-Side Rendering）和CSR（Client-Side Rendering）都有一些对应的 JavaScript 库和框架可供使用。

 

 

对于 SSR，一些常用的库和框架包括：

1. Next.js：基于 React 的 SSR 框架，提供了简单的 API 和配置，使得构建 SSR 应用变得更加容易。

2. Nuxt.js：基于 Vue 的 SSR 框架，提供了类似于 Next.js 的功能，简化了 Vue SSR 应用的开发过程。

3. Angular Universal：Angular 官方提供的 SSR 解决方案，可以将 Angular 应用渲染为服务器端生成的 HTML。

4. Express.js：Node.js 的一个流行的 Web 应用框架，可以用于构建自定义的 SSR 应用。

对于 CSR，一些常用的库和框架包括：

1. React：一个流行的 JavaScript 库，用于构建用户界面。React 可以与其他库或框架配合使用，实现 CSR 的开发。

2. Vue.js：一个渐进式的 JavaScript 框架，也可以用于构建 CSR 应用。Vue.js 提供了一套完整的工具和生态系统，方便开发者进行 CSR 开发。

3. Angular：一个全功能的 JavaScript 框架，也支持 CSR 开发。Angular 提供了许多功能和工具，用于构建复杂的 CSR 应用。

除了上述库和框架，还有许多其他的工具和库可以用于 SSR 或 CSR 的开发，具体选择取决于项目需求、技术栈和个人喜好。