"Astro 内容岛与部分水合最佳实践"

Astro 内容岛与部分水合最佳实践概述Astro 采用内容岛（Islands）架构，让页面主体以纯 HTML 交付，仅在需要交互的局部按需水合。本文基于稳定 `client:*` 指令与组件集成方式，给出工程落地与性能优化建议。核心能力与示例1. 局部交互按需水合--- import Counter from '../components/Counter.jsx' --- <main> <h1>静态内容首屏即达</h1> <!-- 组件在可见时才加载与水合 --> <Counter client:visible /> </main> 2. 指令选择与场景`client:load`：尽快加载，适合关键交互。`client:idle`：空闲时加载，降低首屏 JS 压力。`client:visible`：进入视口再加载，适合长页面。`client:only="react/vue/svelte"`：仅在客户端渲染指定框架组件。3. 与框架组件集成// components/Counter.jsx（React） import { useState } from 'react' export default function Counter() { const [n, setN] = useState(0) return <button onClick={() => setN(n + 1)}>Count: {n}</button> } 在 Astro 页面中通过 `client:*` 指令控制加载与水合时机，减少不必要的客户端 JS。性能优化实践默认静态：页面主体尽量纯静态输出，交互仅在必要区域水合。指令分层：根据交互优先级选择 `load/idle/visible`，平衡体验与负载。资源最小化：组件内部避免大依赖；按需导入并启用代码分割。验证要点指令行为可在网络面板与性能面板中观测加载时机与脚本体积。页面首屏不依赖 JS，可直接验证无脚本情况下的可访问性与内容完整性。