Astro 5.0 ships 90% less JavaScript than traditional frameworks while delivering 2-3x faster load times for content sites. In January 2026, Cloudflare acquired The Astro Technology Company, validating what developers already knew: the zero-JavaScript approach isn’t a gimmick—it’s the future of performant web development. If you’re building blogs, documentation, or marketing sites and you’re still hydrating entire React trees, you’re leaving performance on the table. This tutorial shows you how to build with Astro 5.0 and why islands architecture is beating JavaScript-heavy frameworks where it matters most.
Islands Architecture: Zero JavaScript by Default
Traditional single-page applications hydrate entire pages with JavaScript. Your blog post with a single interactive button? React ships 100-200KB of JavaScript to render static text. Astro flips this model: start with static HTML (zero JavaScript), then add interactive “islands” only where needed.
Think of it as islands of interactivity in a sea of static HTML. A blog post might have one island for comments, another for a newsletter form—everything else is pure HTML delivered instantly. The result? Astro sites ship 18KB of JavaScript versus Next.js’s 180KB for equivalent functionality. That’s a 10x reduction.
Astro gives you fine-grained control over when components hydrate using client directives:
- client:load – Hydrate immediately on page load (critical interactive elements like navigation)
- client:idle – Hydrate when the browser becomes idle (non-critical widgets)
- client:visible – Hydrate when the component enters the viewport (below-fold content like comment sections)
Here’s the kicker: Astro is framework-agnostic. Use React for one island, Vue for another, or Svelte for a third—all on the same page. Each island runs independently, and you’re not locked into a single ecosystem.
Performance Numbers That Matter
Astro’s zero-JavaScript approach delivers measurable results. In real-world testing, Astro sites consistently score 98-100 on Lighthouse, while Next.js static exports range from 80-90. More importantly, over 50% of Astro sites pass Google’s Core Web Vitals assessment—the only framework above 50%. Next.js? About 25%. That’s a 2x difference in sites meeting Google’s performance standards, which directly impacts SEO rankings.
The performance gap is stark:
| Metric | Astro | Next.js |
|---|---|---|
| JavaScript Bundle | 18KB | 180KB |
| Lighthouse Score | 98-100 | 80-90 |
| Core Web Vitals Pass | >50% | ~25% |
| First Content Render | 0.5s | 1-1.5s |
For content-heavy sites—blogs, documentation, portfolios, marketing pages—Astro is 2-3x faster than Next.js. If your site is primarily static content with occasional interactivity, there’s no technical reason to ship a full React runtime.
Getting Started with Astro 5.0
If you know HTML, you already know enough to write your first Astro component. The learning curve is minimal because Astro embraces web standards instead of reinventing them.
Requirements: Node.js v22.12.0 or higher.
Setup: Run the interactive wizard to create a new project:
npm create astro@latest
cd your-project-name
npm run devThe dev server runs at http://localhost:4321/. Astro uses file-based routing—create /src/pages/about.astro and it’s automatically available at /about. No configuration required.
Here’s a basic Astro component:
---
// Component script (runs at build time, not in browser)
const title = "Hello Astro";
---
<h1>{title}</h1>
<p>This is pure HTML - zero JavaScript shipped to the client.</p>Everything between the --- fences runs at build time. The HTML below is what ships to users. No JavaScript, no hydration, just static HTML.
Now add an interactive island with a React component:
---
import Counter from './Counter.jsx';
---
<h1>Static Content</h1>
<p>This paragraph is static HTML.</p>
<Counter client:load />
<p>More static content.</p>Only the Counter component ships JavaScript. The rest of the page is static. This is the islands architecture in practice—interactivity where you need it, nothing more.
What’s New in Astro 5.0
The December 2024 release of Astro 5.0 introduced two major features: Server Islands and the Content Layer.
Server Islands extend the islands philosophy to the server. Combine cached static content with dynamic, personalized content on the same page. Think user avatars, shopping carts, or product reviews—each island loads independently. If one island is slow, it doesn’t block the rest of the page. Each island can set its own cache headers, and Astro automatically encrypts props for privacy.
Content Layer expands Astro beyond local markdown files. Load content from APIs, databases, or CMSs using pluggable loaders with built-in caching and pagination. This makes Astro viable for larger projects where content isn’t stored in your repository.
These features push Astro from “great for static blogs” to “serious framework for production sites.”
When to Use Astro (and When to Skip It)
Astro excels at content-heavy static sites. Use it for:
- Blogs and documentation sites
- Marketing pages and landing pages
- Portfolios and company websites
- Any site where content matters more than heavy interactivity
Skip Astro for highly interactive applications like SaaS dashboards, real-time collaboration tools, or complex e-commerce platforms with dynamic cart logic. Next.js or Remix are better fits when you need server-side rendering throughout or complex client-side state management.
The decision framework is simple: content-first sites use Astro, app-first sites use Next.js. Don’t force a React SPA onto a blog that doesn’t need it.
Deploying to Production
Astro sites deploy anywhere static HTML works, but Cloudflare Pages is the standout choice—especially after Cloudflare’s January 2026 acquisition of Astro. The free tier includes unlimited bandwidth, making it genuinely $0/month for static sites with real traffic.
To deploy to Cloudflare Pages:
# Install the Cloudflare adapter
npm install @astrojs/cloudflare
# Build for production
npm run build
# Deploy via Cloudflare Pages dashboard or Wrangler CLINetlify and Vercel also support Astro with platform-specific adapters (@astrojs/netlify, @astrojs/vercel). All three platforms offer generous free tiers, but Cloudflare’s unlimited bandwidth makes it hard to beat for high-traffic static sites.
The Verdict: Zero JavaScript Wins for Content
Astro’s zero-JavaScript philosophy is backed by hard data: 90% less code shipped, 2-3x faster load times, and 2x better Core Web Vitals pass rates than Next.js for static sites. Cloudflare’s acquisition validates the approach—performance-first frameworks are winning.
If you’re building a blog, documentation site, or marketing pages, try Astro for your next project. The official Astro documentation includes a step-by-step blog tutorial, and you can explore starter templates at astro.new. For deployment, check out Cloudflare Pages for the fastest edge delivery.
The numbers don’t lie: for content sites, zero JavaScript is the right default.
