Astro 与 Islands 架构

共 19 题
#

1. Astro 的 Islands 架构如何实现"零 JS 默认"与部分水合,相比 SSR 框架的优势?

A Astro 页面必须全部使用同一个前端框架
B Astro 默认给页面所有组件注入客户端 JavaScript
C client:visible 在元素进入视口时才水合岛屿 ✓ 正确答案
D 岛屿水合时会同时水合整个页面
#

2. Astro 的岛屿水合策略(partial hydration),何时水合、如何按需加载交互组件?

A client:idle 在浏览器空闲时水合低优先级组件 ✓ 正确答案
B client:only 会先执行服务端渲染再水合
C client:visible 在页面完全加载后立即水合
D 所有 client 指令的水合时机完全相同
#

3. Astro View Transitions 与岛屿持久化,跨页导航时如何保留岛屿组件状态(transition:persist),与 SPA 路由的体验差距?

A transition:persist 会让岛屿在导航时被销毁重建
B View Transitions 让 MPA 导航具备过渡动画并可保留持久化岛屿 ✓ 正确答案
C View Transitions 必须依赖某个 SPA 框架
D 岛屿状态在每次导航后都会自动保留
#

4. Astro 构建产物与岛屿 chunk 加载清单,静态 HTML 与岛屿独立脚本(manifest)的配合机制

A Astro 页面运行时必须加载全部岛屿的脚本
B Astro 构建产物不包含静态 HTML
C 岛屿 chunk 根据 client 指令在触发条件满足时动态加载 ✓ 正确答案
D 岛屿的样式会在页面加载时全部内联
#

5. Astro 中间件(middleware.ts、onRequest),鉴权、重定向、响应改写与 locals 注入在 SSR 站点的工程实践?

A 中间件可以为每个 on-demand 请求注入 locals 并完成鉴权 ✓ 正确答案
B 纯静态构建的页面也会执行中间件逻辑
C onRequest 无法返回重定向响应
D locals 注入不需要任何类型声明
#

6. Astro 的 Content Collections 与内容站点构建流程?

A getCollection 用于查询集合内容并按需生成静态页面 ✓ 正确答案
B 内容文件的 frontmatter 不需要 schema 校验
C 内容集合只能加载本地 markdown 文件
D 内容集合无法生成静态页面
#

7. Astro 集成 React/Vue/Svelte 岛屿时的通信与加载策略?

A 不同框架的岛屿不能存在于同一页面
B 岛屿之间可通过 CustomEvent 或全局状态通信 ✓ 正确答案
C 混用多个框架不会增加运行时体积
D 岛屿只能通过 props 单向通信
#

8. Astro Content Collections 与内容加载 API(glob/entries)如何构建内容站点与文档站?

A getCollection 返回的条目无法排序或过滤
B 文档站必须使用服务端渲染模式
C 文档目录结构无法从 frontmatter 生成
D getEntry 用于精确获取单个内容条目 ✓ 正确答案
#

9. Astro 集成 React/Vue/Svelte 岛屿时,客户端运行时与服务器端渲染如何隔离?

A 所有岛屿共享同一个框架根节点
B 跨岛屿可以传递组件实例引用
C 每个岛屿是独立水合根,运行时互不嵌套与干扰 ✓ 正确答案
D 水合不一致对页面没有任何影响
#

10. Server Islands,服务端渲染的动态内容(个性化、实时数据)如何与静态外壳结合,与 Client Islands 的分工?

A Server Islands 的组件在构建时全部静态生成
B Server Islands 在请求时服务端渲染动态内容并替换页面占位 ✓ 正确答案
C Server Islands 组件在客户端进行水合
D Server Islands 与静态外壳无法共存
#

11. 性能预算与核心指标,Astro 站点的 LCP/INP 优化手段与可观测性(astro:metrics、Web Vitals)如何接入?

A astro:assets 可自动优化图片尺寸与格式,降低 LCP ✓ 正确答案
B 岛屿数量越多、水合越早,INP 越好
C INP 指标反映的是布局稳定性问题
D LCP 优化与字体加载策略无关
#

12. 岛屿 props 的序列化边界与传输成本,非 JSON 类型(Date/Map)与大 payload 的处理

A 岛屿 props 支持任意 JavaScript 类型直接传递
B Date 对象可以无损地直接序列化传递
C 函数不能作为岛屿 props 传递,Date 需降级为字符串或时间戳 ✓ 正确答案
D props 体积越大页面加载越快
#

13. Astro hybrid 渲染模式,按路由混合静态生成与 SSR(output: hybrid)的工程决策

A 导出 prerender = false 的路由会按请求进行服务端渲染 ✓ 正确答案
B hybrid 模式下所有路由都强制走服务端渲染
C 静态生成的路由可以读取请求头信息
D hybrid 模式不支持静态生成
#

14. Astro 图片优化(astro:assets)与部署目标(静态/Serverless/SSR)如何配置?

A astro:assets 只能处理本地图片
B Image 组件在构建期生成多尺寸与格式变体,减少首屏传输 ✓ 正确答案
C 远程图片无需任何域名配置即可使用
D 静态部署无法对图片做任何优化
#

15. Astro Actions 与表单,服务端 action 的渐进增强实现,与 API 路由的取舍?

A defineAction 绑定的表单在无 JS 时原生提交、有 JS 时增强提交 ✓ 正确答案
B Astro Actions 只在启用 JavaScript 时才能工作
C Actions 可以完全替代所有 REST API 场景
D Actions 无法进行服务端数据校验
#

16. Astro 与 View Transitions,MPA 的过渡体验?

A transition:name 可以让元素在页面切换间保持连续过渡 ✓ 正确答案
B View Transitions 会禁用浏览器原生导航
C View Transitions 必须引入 SPA 路由框架
D 过渡动画无法被用户偏好或系统设置禁用
#

17. Astro 的内容集合与静态生成,性能与 SEO?

A 静态生成的页面首屏必须等待 JavaScript 加载
B 集合的 frontmatter 元数据可以驱动 SEO 标签与结构化数据输出 ✓ 正确答案
C 静态页面无法被 CDN 缓存
D 静态生成的内容对搜索引擎不友好
#

18. Astro 的环境变量安全,服务端 env(SECRET 前缀)与客户端暴露前缀(PUBLIC_)的隔离边界?

A SECRET_ 变量会被打包进客户端代码
B PUBLIC_ 前缀变量会被暴露到客户端 bundle ✓ 正确答案
C astro:env 无法对环境变量做类型校验
D 所有环境变量默认都可以在客户端使用
#

19. Astro 的 scoped style 与 is:inline 指令,样式作用域机制与脚本原样保留的应用

A is:inline 会把样式脚本打包成独立外部文件
B Astro 组件内的 style 默认自动 scoped 到组件 ✓ 正确答案
C :global() 无法让样式作用于全局
D 第三方脚本必须经过 Astro 模块化处理