混合树
一个组件树里同时存在服务端组件和客户端组件。下面演示两种组合方式:
服务端组件 ServerCard
直接渲染:这段内容由服务端渲染,它的代码不会进浏览器 bundle。
① 服务端组件 import 客户端组件(把客户端组件当"岛屿"嵌入):
'use client' 客户端组件 ClientShell
② 服务端组件作为 children 传给客户端组件(服务端先算好结果再塞进去):
'use client' 客户端组件 ClientShell
观察:右键"查看网页源码",ServerCard 的内容都在 HTML 里;而客户端组件的交互(点击)需要 JS 水合后才能用。