Astro

Astro Best Practices

Project Structure

• src/pages/: File-based routing. .astro, .md, .mdx files here become pages.
• src/components/: Reusable UI components (Astro, React, Vue, etc.).
• src/layouts/: Shared UI structures (headers, footers, wrappers).

Performance

• Island Architecture: Use client directives (client:load, client:visible, client:idle) sparingly. Default to server-only rendering.
• Component Streaming: Split heavy data fetching into child components to allow the main page/shell to render immediately while data streams in.

Configuration (astro.config.mjs)

• Site URL: always set site for sitemap generation.
• Trailing Slashes: Configure trailingSlash ('always' or 'never') for consistency.
• Integrations: Add integrations (e.g., Tailwind, React) in the integrations array.

Migration Tips

• Ensure all assets are in public/ or src/assets/.
• Use Astro.glob() for importing multiple files.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.