Astro Frontend Website Development
Astro is a web framework oriented toward content sites with minimal JavaScript. Key concept — Islands Architecture: most of the page is static HTML, interactive components (islands) load independently with explicit hydration control.
Islands Architecture
---
// This code runs only on the server (build or request time)
import HeavyChart from '../components/Chart.tsx';
import StaticHero from '../components/Hero.astro';
---
<html>
<body>
<!-- Static HTML, 0 JavaScript -->
<StaticHero title="Title" />
<!-- Interactive React component loads only when visible -->
<HeavyChart client:visible data={chartData} />
<!-- Loads immediately, hydrates on client -->
<Counter client:load />
</body>
</html>
Hydration directives:
-
client:load— immediately -
client:idle— when browser is not busy -
client:visible— when enters viewport -
client:media="(max-width: 768px)"— on media query condition -
client:only="react"— client only (no SSR for this component)
Astro components
---
// Component Script — server (TypeScript)
interface Props {
title: string;
posts: Post[];
}
const { title, posts } = Astro.props;
const formattedDate = new Date().toLocaleDateString('en-US');
---
<!-- Component Template — HTML + JSX-like syntax -->
<section>
<h2>{title}</h2>
<p>Updated: {formattedDate}</p>
<ul>
{posts.map(post => (
<li>
<a href={`/blog/${post.slug}`}>{post.title}</a>
</li>
))}
</ul>
</section>
<style>
/* Scoped CSS */
section { max-width: 800px; margin: 0 auto; }
</style>
Content Collections
Type-safe work with Markdown/MDX content:
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
const blog = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
date: z.date(),
tags: z.array(z.string()),
draft: z.boolean().default(false),
}),
});
export const collections = { blog };
---
import { getCollection } from 'astro:content';
const posts = await getCollection('blog', ({ data }) => !data.draft);
posts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
---
Multi-framework support
Astro supports React, Vue, Svelte, Solid, Preact components in one project:
npx astro add react vue svelte
---
import ReactCounter from './Counter.tsx'; // React
import VueWidget from './Widget.vue'; // Vue
---
<ReactCounter client:load />
<VueWidget client:visible />
View Transitions
Smooth page transitions without SPA architecture:
---
import { ViewTransitions } from 'astro:transitions';
---
<html>
<head>
<ViewTransitions />
</head>
Uses native Navigation API with CSS animations fallback.
When to choose Astro
- Marketing sites, landing pages
- Documentation sites (official documentation for many libraries)
- Blogs with thousands of articles
- Sites where Core Web Vitals are critical
Not suitable: applications with heavy client interactivity (dashboards, editors).
Performance
Astro sites often get 100/100 in Lighthouse without additional optimizations: no JavaScript by default, images via <Image>, CSS minified and inlined.
Timeline
Content site on Astro with Content Collections, SSG (15–50 pages): 1–2 weeks. Hybrid site with server routes and React islands: 2–4 weeks.