判断组件边界时，我先问两个问题：数据在哪里，交互发生在哪里。

  1. 只负责读取文件、数据库或私密配置的组件优先留在服务端。
  2. 需要浏览器状态、事件和动画的最小叶子节点才标记为客户端组件。
  3. 传给客户端的属性应当是可序列化、公开且足够小的数据。
export async function ArticleCount() {
  const count = await repository.countPublished();
  return <strong>{count}</strong>;
}

这样做的目标不是追求“零客户端 JavaScript”，而是让每一段脚本都能解释自己的必要性。

更多背景可参阅 React 官方文档。