什么是SSR服务端渲染

348 阅读4分钟

SSR

Server Side Render, 服务端渲染

从爬虫视角 理解SSR

这是一个按钮, 爬虫能看到这个按钮吗?

看不到.

爬虫看到的是什么?

(省略按钮样式)

<html>
  <body>
    <div><button>hello-world</button></div>
  </body>
</html>

爬虫关心按钮的点击事件吗?

No

从用户视角 理解SSR

当用户在地址栏输入链接, 按了回车, 用户希望的是马上看到完整的页面

此时, 用户关心按钮的点击事件吗?

No

泛化观察者

观察者有两类

  • 爬虫
  • 用户

可以认为观察者, 没有手, 只有眼睛.

他们看到的东西可以说是一模一样的,

爬虫看到的是字符串, 用户看到的是字符串对应的网页

网页加载完了吗

没有, 因为按钮的点击事件还没有加载,

当浏览器和爬虫一样获取了html字符串, 转换为dom展示给用户以后,

客户端还要加载js文件, 为按钮绑定点击事件

这样, 网页就加载完了

客户端和服务端的代码一样吗?

可以说是一样的

服务器端生成的是html字符串, 是静态 HTML 页面,

客户端把这个静态HTML页面, 渲染到浏览器中,

那客户端下方的红色的是什么呢

Hydration(水合作用)

Hydration指的是将服务器端渲染的静态HTML页面转换为可交互的页面,即在客户端重新绑定事件,处理路由等交互操作

客户端是直接用的服务器发送过来的html字符串吗?

是.

客户端的页面使用的是服务器传过来的静态HTML字符串,而不是客户端自己重新生成HTML字符串。

在同构中,服务器端负责生成静态HTML字符串,并将其发送给客户端。客户端在接收到静态HTML字符串后,使用Hydration操作将其转换为可交互的页面,并绑定事件等交互操作。

因此,客户端不需要重新生成HTML字符串,而是直接使用服务器传过来的静态HTML字符串。

SSR有哪些好处? 有哪些坏处?

SSR的好处包括:

  1. 提高首屏加载速度:由于服务器端渲染可以生成静态HTML页面,从而减少客户端渲染的时间,提高网站的首屏加载速度。

  2. 提高SEO优化效果:由于搜索引擎爬虫可以直接获取服务器端渲染的静态HTML页面,从而提高网站的SEO优化效果。

  3. 改善用户体验:由于服务器端渲染可以提高网站的首屏加载速度和SEO优化效果,从而改善用户的体验和满意度。

SSR的坏处包括:

  1. 服务器压力增加:由于服务器端渲染需要在服务器上生成静态HTML页面,从而增加了服务器的压力和负担。

  2. 开发难度增加:由于服务器端渲染需要考虑客户端和服务器端的环境差异,从而增加了开发的难度和复杂度。

  3. 客户端渲染的优势受限:由于服务器端渲染只能在首屏加载时提高性能和SEO优化效果,而在后续的交互过程中仍然需要客户端渲染,从而限制了客户端渲染的优势和灵活性。

SSR适用场景

  1. 对SEO优化要求高的网站:由于搜索引擎爬虫无法执行JavaScript代码,因此客户端渲染的页面对SEO优化效果不佳。而使用SSR可以在服务器端生成静态HTML页面,从而提高网站的SEO优化效果。
  2. 对网站首屏加载速度要求高的网站:由于客户端渲染需要在浏览器中执行JavaScript代码,因此首屏加载速度较慢。而使用SSR可以在服务器端生成静态HTML页面,从而减少客户端渲染的时间,提高网站的首屏加载速度。
  3. 对用户体验要求高的网站:由于SSR可以提高网站的首屏加载速度和SEO优化效果,从而改善用户的体验和满意度。
  4. 对安全性要求高的网站:由于客户端渲染需要将JavaScript代码传输到浏览器中执行,因此存在一定的安全风险。而使用SSR可以在服务器端生成静态HTML页面,从而减少安全风险。