Jary8佳瑞网

文章框架MDX 里的交互组件该不该成为岛屿

MDX 里的交互组件该不该成为岛屿

MDX 里的交互组件什么时候该成为岛屿?本文用主题切换与代码复制两个例子,讨论边界、水合成本与降级策略。

本文目录 / Contents
  1. 01内容站默认不需要水合
  2. 02两个典型例子
  3. 03边界怎么划

内容站默认不需要水合

文章的主体是静态内容。只要页面能在没有 JavaScript 的情况下阅读,就已经满足大多数访问场景。岛屿架构的价值在于把交互限制在局部,而不是给整页补水。

两个典型例子

主题切换发生在全局外壳,用一小段原生脚本即可,不需要 React。代码复制按钮需要访问剪贴板、维护短暂状态,适合做成小岛。

<CopyButton code={code} client:visible />

client:visible 让组件进入视口才加载,避免正文里的交互组件拖慢首屏。

边界怎么划

判断标准不是「能不能用框架写」,而是「有没有持续状态」和「是否必须立即交互」。纯展示、一次性动画、简单主题切换都可以留在静态层。

  • 能服务端渲染的内容不要放进岛屿
  • 水合成本要算进页面预算
  • 交互失败时保留可读的静态内容

搜索站点内容

输入关键词后按结果列表浏览,按 Esc 关闭。

输入关键词,搜索文章与项目。支持中文。

Enter 打开结果Esc 关闭/ 或 ⌘K 唤起索引本地索引 · Pagefind