DEV Community

Alex Spinov
Alex Spinov

Posted on

Astro 4 Has a Free Content Framework: Ship Zero JavaScript by Default and Use Any UI Library

#astro #javascript #webdev #frontend

You build a blog with Next.js. The homepage — which is mostly static text — ships 150KB of React runtime. You add next/dynamic, split chunks, configure ISR. All to serve what is essentially an HTML page.

What if your framework shipped pure HTML by default, and only added JavaScript for the components that actually need it?

That's Astro's Islands Architecture — and Astro 4 makes it better than ever.

What Astro 4 Gives You

  • Zero JS by default — pages ship as pure HTML unless you opt in
  • Islands Architecture — interactive components hydrate independently
  • Use any framework — React, Vue, Svelte, Solid, Preact in the same project
  • Content Collections — type-safe Markdown/MDX with schema validation
  • View Transitions — SPA-like page transitions without client-side routing
  • Server Actions — form handling and mutations (new in Astro 4)
  • Built-in image optimization — responsive images with zero config

Quick Start 

npm create astro@latest
Enter fullscreen mode Exit fullscreen mode

Islands Architecture — Interactive Only Where Needed 

---
// src/pages/index.astro
import Header from '../components/Header.astro';    // Zero JS — static HTML
import ProductCard from '../components/ProductCard.astro'; // Zero JS
import CartWidget from '../components/CartWidget.jsx';  // React — interactive
import ReviewSlider from '../components/ReviewSlider.svelte'; // Svelte — interactive
---

<html>
  <body>
    <Header />  <!-- Pure HTML, no JavaScript -->

    <main>
      <ProductCard />  <!-- Pure HTML -->

      <!-- Only THIS component ships JavaScript -->
      <CartWidget client:visible />

      <!-- This loads when scrolled into view -->
      <ReviewSlider client:visible />
    </main>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

client:visible — the component's JavaScript loads only when the user scrolls to it. A page with 20 static sections and 2 interactive widgets ships JS for only those 2 widgets.

Content Collections — Type-Safe Markdown 

// src/content/config.ts
import { defineCollection, z } from "astro:content";

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    author: z.string(),
    tags: z.array(z.string()),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };
Enter fullscreen mode Exit fullscreen mode 
---
// src/pages/blog/[slug].astro
import { getCollection } from "astro:content";

export async function getStaticPaths() {
  const posts = await getCollection("blog", ({ data }) => !data.draft);
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await post.render();
---

<article>
  <h1>{post.data.title}</h1>
  <time>{post.data.pubDate.toLocaleDateString()}</time>
  <Content />
</article>
Enter fullscreen mode Exit fullscreen mode

View Transitions — SPA Feel Without SPA Weight 

---
// src/layouts/Base.astro
import { ViewTransitions } from 'astro:transitions';
---

<html>
  <head>
    <ViewTransitions />  <!-- One line — instant page transitions -->
  </head>
  <body>
    <slot />
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Pages transition smoothly with cross-fade animations. Back button works. No client-side router needed.

Astro 4 Performance vs Others

Framework Blog homepage JS Lighthouse Score
Astro 4 0 KB 100
Next.js 14 85-180 KB 75-90
Nuxt 3 95-150 KB 80-92
SvelteKit 25-50 KB 90-98

When to Choose Astro

Choose Astro when:

  • Content-heavy sites: blogs, docs, marketing, portfolios
  • You want to mix React + Svelte + Vue components in one project
  • SEO and page speed are top priorities
  • You want progressive enhancement (works without JS)

Skip Astro when:

  • Highly interactive SPAs (dashboards, real-time apps)
  • Every page needs full client-side state management
  • You need WebSocket/real-time features throughout

The Bottom Line

Astro 4 flips the script: instead of "here's all the JavaScript, let's try to reduce it," Astro starts at zero and lets you add interactivity only where it matters.

Start here: astro.build

Need custom data extraction, scraping, or automation? I build tools that collect and process data at scale — 78 actors on Apify Store and 265+ open-source repos. Email me: Spinov001@gmail.com | My Apify Actors

Top comments (0)