服务端渲染
组件可以分为两种三类:服务端组件、客户端组件、纯客户端组件。
服务端组件
- 服务端组件可以是个异步函数,可以用来获取数据、将组件渲染为 HTML 。
- HTML 到达客户端后,React 不会对其进行后续操作,因此服务端组件不应当存在回调事件。
客户端组件
- 客户端组件需要用
'use client'
声明。 - 它在服务端和客户端均会被渲染:
- 在服务端上,会被渲染为 RSC Payload ,并将组件代码打包进 JS 里;
- 在客户端上,React 也会渲染一遍组件,并与服务端的渲染结果比对;
- 最后 React 会将回调事件挂载到 DOM 元素等位置上。
RSC Payload 是 Next.js 文档中的说法。
纯客户端组件
纯客户端组件是指仅在客户端渲染的组件。它可能是由 lazy
、Suspense
或 Next.js 里的 dynamic
实现。