Components and Pages

Astro components

• Syntax: .astro files have a frontmatter script (island-local TS/JS) + template + styles.
• Props: declare with export const {prop}; supports typing.
• Slots: <slot /> default, <slot name="xxx" /> named slots.
• Scoped styles: <style> scopes to the component; use :global to extend.

Page routing

• File routing: src/pages/xxx.astro → /xxx, index.astro → /.
• Dynamic routes: [id].astro and Astro.params.id.
• Nested routes: folder depth maps to path depth.
• Redirect/alias: return Astro.redirect() in getStaticPaths or page logic.

UI frameworks (Islands)

• Import Vue/React/Svelte/Preact components directly.
• Client directives: client:load / client:idle / client:visible / client:media / client:only="vue" etc.
• Prefer delayed/on-demand directives for interactive pieces to avoid loading all JS.

Layout system

• Create src/layouts/BaseLayout.astro; wrap pages with <BaseLayout>.
• Layouts can nest and pass props (title, description, SEO meta).
• Shared UI (nav, footer, theme switch) lives in layouts.

Best practices

• Minimal JS: default no JS; add client directives only where interaction is needed.
• Split islands: break interactions into small islands to reduce hydration cost.
• Type safety: type props and getStaticPaths results.
• Asset optimization: use built-in <Image />/<Picture /> or @astrojs/image.
• Error handling: catch async errors in pages/layouts and show friendly fallbacks.