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的好处包括:
-
提高首屏加载速度:由于服务器端渲染可以生成静态HTML页面,从而减少客户端渲染的时间,提高网站的首屏加载速度。
-
提高SEO优化效果:由于搜索引擎爬虫可以直接获取服务器端渲染的静态HTML页面,从而提高网站的SEO优化效果。
-
改善用户体验:由于服务器端渲染可以提高网站的首屏加载速度和SEO优化效果,从而改善用户的体验和满意度。
SSR的坏处包括:
-
服务器压力增加:由于服务器端渲染需要在服务器上生成静态HTML页面,从而增加了服务器的压力和负担。
-
开发难度增加:由于服务器端渲染需要考虑客户端和服务器端的环境差异,从而增加了开发的难度和复杂度。
-
客户端渲染的优势受限:由于服务器端渲染只能在首屏加载时提高性能和SEO优化效果,而在后续的交互过程中仍然需要客户端渲染,从而限制了客户端渲染的优势和灵活性。
SSR适用场景
- 对SEO优化要求高的网站:由于搜索引擎爬虫无法执行JavaScript代码,因此客户端渲染的页面对SEO优化效果不佳。而使用SSR可以在服务器端生成静态HTML页面,从而提高网站的SEO优化效果。
- 对网站首屏加载速度要求高的网站:由于客户端渲染需要在浏览器中执行JavaScript代码,因此首屏加载速度较慢。而使用SSR可以在服务器端生成静态HTML页面,从而减少客户端渲染的时间,提高网站的首屏加载速度。
- 对用户体验要求高的网站:由于SSR可以提高网站的首屏加载速度和SEO优化效果,从而改善用户的体验和满意度。
- 对安全性要求高的网站:由于客户端渲染需要将JavaScript代码传输到浏览器中执行,因此存在一定的安全风险。而使用SSR可以在服务器端生成静态HTML页面,从而减少安全风险。