DEV Community

Alex Spinov
Alex Spinov

Posted on

Astro Has a Free Framework That Ships Zero JavaScript by Default — Your Site Just Got 10x Faster

#astro #webdev #performance #frontend

The JavaScript Problem

Your blog doesn't need React hydration. Your docs site doesn't need a virtual DOM. Your marketing page doesn't need 200KB of JavaScript.

But every framework ships it anyway.

Astro ships zero JavaScript by default. Static HTML. Only adds JS for interactive components — and only when they're visible.

What Astro Gives You

Island Architecture 

---
import StaticHeader from './Header.astro';
import InteractiveSearch from './Search.tsx';
import StaticFooter from './Footer.astro';
---

<StaticHeader />  <!-- Zero JS -->
<InteractiveSearch client:visible />  <!-- JS only when scrolled into view -->
<StaticFooter />  <!-- Zero JS -->
Enter fullscreen mode Exit fullscreen mode

90% of your page is static HTML. Only the search bar loads JavaScript — and only when the user scrolls to it.

Use Any Framework (Or None) 

---
import ReactCounter from './Counter.tsx';
import VueCard from './Card.vue';
import SvelteForm from './Form.svelte';
---

<ReactCounter client:load />
<VueCard client:idle />
<SvelteForm client:visible />
Enter fullscreen mode Exit fullscreen mode

Mix React, Vue, and Svelte in the same page. Each component uses its own framework. Astro handles the orchestration.

Content Collections 

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

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
  }),
});
Enter fullscreen mode Exit fullscreen mode

Type-safe Markdown/MDX. Query your content like a database.

View Transitions 

---
import { ViewTransitions } from 'astro:transitions';
---
<head>
  <ViewTransitions />
</head>
Enter fullscreen mode Exit fullscreen mode

Smooth page transitions like a SPA. But it's still static HTML. No client-side router needed.

Server Endpoints 

// src/pages/api/search.ts
export async function GET({ request }) {
  const url = new URL(request.url);
  const query = url.searchParams.get('q');
  const results = await searchDatabase(query);
  return new Response(JSON.stringify(results));
}
Enter fullscreen mode Exit fullscreen mode

Quick Start 

npm create astro@latest
cd my-project
npm run dev
Enter fullscreen mode Exit fullscreen mode

Why This Matters

The average web page ships 500KB+ of JavaScript. Astro proves most of it is unnecessary. Ship HTML where you can, JavaScript where you must.

Need data for your Astro content sites? Check out my web scraping actors on Apify Store — structured data feeds for content collections. For custom solutions, email spinov001@gmail.com.

Top comments (0)