当前位置：首页 > news >正文

前端-服务端渲染（SSR）和客户端渲染（CSR）的页面，在浏览器发出请求之后，分别返回的是什么

news 2024/11/15 6:12:05

服务端渲染（Server-Side Rendering, SSR）和客户端渲染（Client-Side Rendering, CSR）在浏览器发出请求后的响应内容有所不同。下面是具体的区别：

1. 客户端渲染（CSR）

请求过程：
- 当浏览器发送请求到服务器时，服务器只返回一个基础的 HTML 文件。
- 该 HTML 文件通常包含一些初始的标记（如 <div id="app"></div>），以及 JavaScript 文件的引用。
- 浏览器下载并执行这些 JavaScript 文件后，会动态地生成页面内容，并将其插入到 DOM 中。
返回内容：
- 初始请求返回的内容通常是一个简单的 HTML 文件，包含基本的结构和 JavaScript 文件的引用。
- ```
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>My App</title>
</head>
<body><div id="app"></div><script src="/bundle.js"></script>
</body>
</html>
```
  2. 服务端渲染（SSR）
- 请求过程：
  - 当浏览器发送请求到服务器时，服务器会在服务器端生成完整的 HTML 内容。
  - 服务器将这个完整的 HTML 内容发送给浏览器。
  - 浏览器接收到完整的 HTML 后，直接渲染页面。
  - 随后，JavaScript 文件可能会进一步增强或修改页面内容。
- 返回内容：
  - 初始请求返回的内容是一个完整的 HTML 文件，包含所有需要显示的内容
  - ```
  <!DOCTYPE html>
  <html lang="en">
  <head><meta charset="UTF-8"><title>My App</title>
  </head>
  <body><div id="app"><h1>Welcome to My App</h1><p>This is some initial content.</p></div><script src="/bundle.js"></script>
  </body>
  </html>
```
  比较总结
- 客户端渲染（CSR）：
  - 返回一个基础的 HTML 文件，包含初始结构和 JavaScript 文件的引用。
  - 页面内容通过 JavaScript 动态生成。
  - 优点：开发简单，用户体验流畅。
  - 缺点：首次加载时间较长，SEO 不友好。
- 服务端渲染（SSR）：
  - 返回一个完整的 HTML 文件，包含所有需要显示的内容。
  - 页面内容在服务器端生成，直接发送给浏览器。
  - 优点：首次加载速度快，SEO 友好。
  - 缺点：服务器负载较高，开发复杂度增加。