VitePress React 岛屿架构

基于 @docs-islands/vitepress 在 VitePress 中渲染 React 组件，采用 Astro 风格的岛屿架构实现选择性 hydration。

快速开始

<script lang="react">
  import Chart from './components/Chart';
</script>

<Chart client:load data={...} />

渲染策略速查

指令	场景	SSR	Hydration
（无）/ ssr:only	纯静态展示	是	否
client:only	依赖浏览器 API	否	是
client:load	首屏关键交互	是	立即
client:visible	懒加载交互	是	可见时

附加指令：spa:sync-render（或 spa:sr）- 消除路由切换时的布局闪烁。

如何选择策略

需要交互？
├─ 否 → ssr:only（默认）
└─ 是 → 依赖浏览器 API？
        ├─ 是 → client:only
        └─ 否 → 首屏关键内容？
                ├─ 是 → client:load + spa:sr
                └─ 否 → client:visible

详细参考

主题	说明	参考
渲染策略	各策略详解与性能权衡	rendering-strategies
指令语法	完整语法与组件规范	directive-reference

Contributors

XiSenao

Changelog

Last edited 3 months ago

View full history

2f55cfe-feat(ai-instructions): add skill definitions package