100 Astro resources for developers

Define strict frontmatter schemas in src/content/config.ts using Zod to ensure all markdown files contain required metadata like publishDate and author.

Use the <Content components={{ h1: CustomHeading }}> syntax to override standard HTML elements with custom Astro or React components globally.

Implement z.discriminatedUnion in collections to handle different types of content (e.g., 'video' vs 'article') within the same directory.

Override default slug generation by defining a custom 'slug' field in the Zod schema and using it in getStaticPaths for SEO-optimized URLs.

Use the reference() function in Zod to create relationships between collections, such as linking an 'author' entry to a 'blog' entry.

Utilize the experimental content layer to fetch data from remote APIs or CMSs while maintaining the local Content Collection developer experience.

Configure the image() helper in Zod schemas to automatically process and optimize local images referenced in markdown frontmatter.

Use the getEntry('collection', 'slug') function to fetch specific items with full TypeScript autocompletion for all frontmatter fields.

Inject remark-gfm or rehype-autolink-headings into astro.config.mjs to extend markdown functionality for technical documentation.

Implement @astrojs/rss using content collection data to automatically generate valid XML feeds for blog subscribers.

Use client:visible to delay hydration of heavy components (like complex charts) until they enter the user's viewport.

Apply client:idle to components like newsletter signups that don't need immediate interactivity, reducing initial TBT.

Use Nano Stores to share state between multiple frameworks (e.g., React and Svelte) on the same page without a heavy runtime.

Integrate @astrojs/svelte for UI components that require minimal JavaScript bundle size compared to React or Vue.

Implement Pagefind as a post-build step to provide full-text search capabilities without a server-side backend or heavy JS library.

Replace standard <img> tags with <Image /> from astro:assets to automate WebP conversion and layout shift prevention.

Enable the <ViewTransitions /> component in your layout to provide SPA-like navigation feel between static pages.

Use the transition:persist directive to keep a component state (like an audio player) alive across page navigations.

Configure the prefetch: true setting in astro.config.mjs to automatically load link data when users hover over internal links.

Use client:only="react" for components that strictly require browser globals like window or document to prevent SSR errors.

Generate thousands of pages for programmatic SEO by mapping large JSON or CSV datasets to the getStaticPaths return array.

Deploy Astro using the @astrojs/cloudflare adapter to leverage Edge Functions and fast static asset delivery.

Set output: 'hybrid' in config to keep most pages static while enabling SSR for specific routes like auth or search results.

Use middleware.ts to detect user location and serve localized content or redirect to regional subdomains at the edge.

Configure Vercel or Netlify adapters to use On-demand Revalidation for updating specific pages without a full site rebuild.

Fetch data from external APIs directly inside the frontmatter of .astro files to bake dynamic data into static HTML at build time.

Use @astrojs/sitemap to automatically generate a sitemap.xml that includes all dynamic routes generated by getStaticPaths.

Use the astro:env (experimental) or a custom Zod validation script to ensure required API keys are present during build.

Utilize the build.concurrency setting in astro.config.mjs to speed up static generation for sites with 10,000+ pages.

Offload analytics and tracking scripts to a web worker using @astrojs/partytown to keep the main thread clear for user interactions.