Learn ASTRO with Real Code Examples
Updated Nov 21, 2025
Practical Examples
Markdown-powered blog
Documentation site using MDX
Marketing homepage with React islands
Static e-commerce catalog
Hybrid SSR + SSG product site
Troubleshooting
Check hydration directive (client:load/client:visible)
Verify framework integrations are installed
Ensure correct component paths
Fix TypeScript errors in content collections
Resolve SSR adapter mismatches
Testing Guide
Unit tests with Vitest
Component testing with @astrojs/test-utils
E2E with Playwright
Mock SSR components
Lint MDX & markdown files
Deployment Options
Static hosting (default)
Vercel (SSR adapter)
Netlify Edge
Cloudflare Pages
Deno Deploy
Tools Ecosystem
Astro CLI
Astro Integrations
Content collections
Image & markdown plugins
SSR adapters (Node, Deno, Cloudflare)
Integrations
React / Vue / Svelte / Solid
Tailwind CSS
MDX
Partytown
Preact
Productivity Tips
Keep islands small and focused
Use MDX for mixed content + components
Prefer content collections for data
Leverage Astro integrations instead of manual setup
Cache API fetches during build
Challenges
Build a personal blog
Create a landing page with islands
Develop a docs site using MDX
Integrate React + Svelte together
Publish an Astro theme