Astro ships HTML first. JavaScript loads only where you ask for it. That philosophy produces fast sites by default, which is why portfolios, docs, blogs, and marketing pages built with Astro tend to score well on Core Web Vitals without heroic optimization work.
But reading about "islands architecture" in the abstract is less useful than seeing what teams actually build. Here are categories of real Astro sites and what makes each pattern work.
Personal portfolios and blogs
Astro is a natural fit for developer portfolios. The content is mostly static (project descriptions, blog posts, about pages), and the visual flair comes from CSS, not heavy client-side frameworks.
What you see in practice:
- Markdown or MDX for blog posts with custom components- Minimal or zero client-side JavaScript- Fast load times even on shared hosting- Custom themes built with Tailwind or vanilla CSS- RSS feeds generated at build timeBecause Astro supports content collections natively, blog posts live as local files with frontmatter. No external CMS is required for small sites, though adding one (like BCMS) makes sense when a non-technical co-author needs to contribute. ## Documentation sites Documentation needs fast navigation, searchability, and the ability to update frequently. Astro's Starlight template is designed specifically for docs:
- Sidebar navigation auto-generated from file structure- Search built in- Dark mode by default- Versioning through content collections- MDX support for interactive examples inside docs pagesTeams that outgrow a static docs site can connect Astro to a headless CMS for multi-author workflows without losing the speed benefits. ## Marketing and landing pages Marketing sites benefit most from Astro's zero-JS default. A campaign page that loads in under a second and scores 100 on Lighthouse helps conversion and ad quality scores. Common patterns:
- Hero sections with animated SVGs (CSS-only)- Testimonial carousels as isolated islands (client:visible)- Pricing tables rendered as static HTML- CTA forms as small React or Preact islands- A/B testing via edge middleware, not client-side scripts## E-commerce storefronts Astro handles product listing pages well when paired with a commerce API. Product detail pages can be statically generated at build time (SSG) or server-rendered on demand. Interactive pieces like cart widgets become islands.
- Product grids rendered as static HTML for SEO- Cart icon with client:load for immediate interactivity- Checkout redirects to a hosted payment page (Stripe, Shopify)- Category filters as small interactive components## Agency sites and client work Agencies ship multiple sites per quarter. Astro's low overhead and framework-agnostic island model let them reuse components across projects without locking into a single UI library.
- Shared design tokens across client projects- Mix React, Vue, or Svelte components in the same project- Fast builds even for content-heavy sites with hundreds of pages- Easy deployment to Vercel, Netlify, or Cloudflare Pages## Content-heavy editorial sites News sites, recipe blogs, and magazines with thousands of articles benefit from Astro's build performance and content collection features. When paired with a headless CMS like BCMS:
- Editors create entries in a visual dashboard- Developers define templates and content models- Build times stay fast because Astro only regenerates changed pages (with incremental builds)- SEO metadata lives in CMS fields, not hardcoded frontmatter## What makes these examples work Across all categories, the pattern is the same:
- Static HTML for content that does not change per user- Islands for interactive widgets that justify their JavaScript cost- Content sourced from files, APIs, or a CMS depending on team size- Deployment to edge CDNs for global speedAstro does not try to be everything. It is excellent at content sites and good enough for light interactivity. When your app becomes dashboard-heavy or real-time, a different framework makes more sense. ## Related reading
- Astro Server Islands: the full tutorial- Best CMS for Astro in 2026- Jamstack frameworks comparedWant screenshots, live URLs, and a breakdown of each site's Astro configuration? Read the full showcase: 20 Astro Website Examples.
Top comments (0)