React Server Components优势及调研

423 阅读3分钟

一、 react服务器端渲染原始解决方案

a.使用 react-dom/server,将react组件编译为静态的HTML从而实现渲染

ref:reactjs.org/docs/react-…

b. 使用 Next.js 服务器端渲染库

ref:nextjs.org/docs/gettin…

二、 react server components 与原始服务器端渲染的不同

Server component 并不完全是服务器端渲染

以 Next.js 为例看服务器端渲染机制:

image.png

  1. 将网站以静态的方式导出,没有js代码
  2. 根据网站页面进行部分的静态导出
  3. 完整的服务器端渲染树
  4. 将组件拆散并动态的引入及渲染在客户端(类似于一个react module)
  5. 将组件拆散并动态的引入及渲染在服务器端(类似于一个react module)

缺陷:

  1. 完全静态导出意味着全部页面都是基于HTML文档,会导致每一次前端页面有任何需要更新都会将整个渲染树重新渲染
  2. 部分静态导出意味着只有单个页面是静态文档。这意味着只有某些node节点(例如4,7)不会在服务器端渲染并以原生js的方式被当作正常的组件渲染。因此,4和7的子组件8、9、14也只能以这样的方式渲染。
  3. 在服务器端将组件拆分并动态渲染的方式与react server component是最接近的。这种方式是将组件的代码拆成不同的bundles(chunks),在服务器端进行渲染,然后只有当客户端请求时才会将其通过网络发送到客户端。

RSC(react server component)与 【服务器端动态渲染】 的不同:

举例:用户使用搜索框输入内容并获取结果时 服务器端动态渲染 a. 用户在输入的时候,客户端将向接口发送数据请求(普通fetch请求) b. 将请求成功后获取的结果解析为json数据,然后给到react c. react获取数据后更新相应的ui组件 使用 RSC (react server component) a. 用户在输入的时候,客户端向一个支持RSC渲染的接口发送请求 b. 服务端将自行渲染需要显示的组件,并发送一个既不是json也不是静态html的数据包给客户端 c. 客户端可以直接解析这个数据包并将它渲染成一个静态UI (并不是一个react组件)。这样节省了客户端解析组件的时间。

三、 使用SRC需要注意的问题

  1. 由于服务器端渲染的组件其实是chunks的ui更新,因此这些组件是不能与用户进行交互的。
  2. 解决问题1的方法是在服务器端组件中对客户端的组件进行引用。
  3. 服务器端组件的state是自动与客户端组件的state同步的,不可以自行的创建或销毁组件,react会自动控制。