【面试题】服务端渲染

什么是服务端渲染

通俗的说就是 服务端生成 html 资源,在客户端样式渲染,注册挂载事件。

React SSR 实现过程?原理?注意事项?

React SSR 原理

  • 客户端访问 /home 页面
  • koa router 引入 react home 组件
  • renderToString 将组件转换为 html 字符串。
  • 服务端返回 html 字符串,返回类型 html
  • 在服务端直出带数据的页面时,将 store 存储在全局变量中,为前端 store 数据获取做准备的过程叫做数据注水。
  • 客户端渲染页面,同时加载 js 资源
  • 前端获取来自全局变量中的数据并填充自身,用于页面数据渲染的过程叫数据脱水。
  • 客户端通过 hydrate 重新 render page 组件,生成虚拟 dom,之后操作和客户端渲染一致。

SSR 比 CSR 快吗?

首屏渲染 SSR 比 CSR 快,加载其他页面时,SSR 会从头重新加载,而 SPA 则只加载一部分模块,甚至提前与加载组件。

为什么 SSR 首屏渲染快

主要体现在 http 请求数量上,ssr 只需要请求一个 html 文件就能展现出页面,虽然在服务器上会调取接口,但服务器之间的通信要远比客户端快,甚至是同一台服务器上的本地接口调取。

ReactDom.render 与 ReactDom.hydrate

  • React16 的 hydrate 时,hydrate 的策略与 render 的策略不一样,其并不会对整个 dom 树做 dom patch,其只会对 text Content 内容做 patch

  • render 如果初始 DOM 和当前 DOM 之间存在差异,则可能会更改您的节点。hydrate将仅附加事件处理程序。

renderToString 和 renderToStaticMarkup 的区别。

  • renderToString 方法渲染的时候带有 data-reactid 属性. (render 方法会使用 innerHTML 的方法重写 #react-target 里的内容)
  • renderToStaticMarkup 则没有 data-reactid 属性, 可以节省一点流量。(前端 react.js 会认识之前服务端渲染的内容, 不会重新渲染 DOM 节点, 前端 react.js 会接管页面,执行 componentDidMout 绑定浏览器事件等。)

data-reactid 简单的说就是 react 组件 的一个唯一标示 id。

✏️ 如有问题,欢迎指正
上一篇 : 【面试题】工程化