React--- 服务端渲染

104 阅读1分钟

SSR

SSR缺点

标准的SSR中,服务器端渲染页面所有的HTML,通过捆绑将所有必要的JS传输到客户端。 缺点:

  • TTFB:第一个字节到达用户浏览器所需的时间。SSR需要在服务器上渲染所有HTML,包括捆绑的JS,这需要等待必要的数据请求和执行渲染逻辑,会出现白屏现象
  • TTI:交互时间可能会延迟。

SSR运行过程:

  • 客户端向服务端发送请求
  • 在服务器上生成HTML。服务器为每个请求创建新的HTML内容,然后将HTML发送到浏览器
  • 浏览器解析并渲染HTML(无法交互)
  • 浏览器发送请求获取JS文件并下载
  • 浏览器执行JS并进行交互作用

流式SSR【流式SSR通过分别渲染每个组件并逐个创建JS捆绑包,流式传输内容(逐块方式)】「推荐使用」

流式SSR运行过程

  • 客户端向服务端发送请求
  • 服务器返回一个使用节点流进行数据传输的机制,同时向浏览器返回一个基本的HTML文件
  • 客户端接受HTML文件并解析
  • 服务器将完成渲染组件的UI和必要的JS分块传输到浏览器
  • 浏览器执行并使这些块执行就绪

服务端渲染方案

  • react dom /server 对应API实现服务端
  • react dom/client 对应API实现前端水合
  • 数据预取方案
  • 水合过程
  • 服务端API设计
  • 路由架构(约定式路由)
  • 缓存

react hydrate renderToString

路由系统

状态同步

样式提取