ssr节点是什么,ssr节点有什么作用

ssr节点是什么？SSR 是一个比较常见的渲染模式，使用这种渲染模式可以从服务端直接返回要渲染的静态内容。

其常见流程为：

• 浏览器发起 HTTP 请求对应的页面
• 服务端接收到请求后准备渲染页面所需要的数据
• 将所需要的数据传入需要渲染的页面组件中然后通过 renderToString 输出为静态内容
• 拼接页面模版、水合脚本等将生成的静态内容返回到浏览器，浏览器进行渲染
• 浏览器渲染内容，执行水合脚本恢复页面交互和动态能力
• 纯粹的 SSR 指代的接收到请求、输出静态内容、返回浏览器的模式。水合的相关部分是属于 CSR 的内容。
• 要注意水合并不是必须的，可以按需选择。比如如果你的需求是要对不同的用户展示不同的页面，然而页面上并没有任何可以交互或动态的内容，那完全可以忽略水合的部分。

一般应用于以下场景：

• 出于首页打开速度、用户体验、SEO 等目的需要让用户更快的看到页面首屏内容
• 想要预先渲染的页面内容中存在动态的内容

ssr节点有什么优势？

• 有利于SEO，由于页面在服务器生成，搜索引擎直接抓取到最终页面结果。
• 有利于首屏渲染，html渲染所需要的数据都在服务器处理好，直接生成html，首屏渲染时间变短。

SSR 是 JSP、PHP 时代就存在的古老的技术，只不过之前是通过模版引擎，而现在是通过 node 服务渲染组件成字符串，客户端再次渲染，这种叫做同构渲染的模式。

React SSR 是服务端通过 renderToString 把组件树渲染成 html 字符串，浏览器通过 hydrate 把 dom 关联到 fiber 树，加上交互逻辑和再次渲染。

服务端 renderToString 就是递归拼接字符串的过程，遇到组件会传入参数执行，遇到标签会拼接对应的字符串，最终返回一段 html 给浏览器。

浏览器端 hydrate 是在 reconcile 的 beginWork 阶段，依次判断 dom 是否可以复用到当前 fiber，可以的话就设置到 fiber.stateNode，然后在 completeWork 阶段就可以跳过节点的创建。

这就是 React SSR 从服务端的 renderToString 到浏览器端的 hydrate 的全流程的原理。

时代互联作为国内十强知名的互联网应用服务提供商，企业互联网服务首选品牌，并基于云计算的领先的互联网应用服务提供商，致力提供优质的域名注册、海内外虚拟主机、云主机、企业邮箱、智能建站、多线DNS、云服务器、服务器租用、服务器托管等一系列信息化服务。

高性价比云服务器购买链接：https://now.cn/fcloud/highcloud.php