Astro: islands architecture and hybrid rendering for performant content
- October 2025 |
- 02 Mins read
Astro is a modern framework designed for the creation of high-performance static and hybrid sites. Born in 2021, it has quickly gained ground thanks to its server-first approach and an islands architecture that drastically reduces the weight of distributed JavaScript. This model allows obtaining fast pages, optimized for SEO, and easy to maintain.
Unlike SPAs that hydrate the entire interface in the browser, Astro allows selective hydration.
Only interactive components are transformed into JavaScript and made active, while the rest of the page remains static. This concept, known as partial hydration, is based on the so-called ‘islands’.
// Islands example
import Hero from '../components/Hero.astro';
<main>
<Hero client:visible />
</main>;Each component can be built in Astro or integrated from frameworks like React, Vue, Svelte. This compatibility allows reusing existing code or migrating progressively, without having to rebuild everything from scratch.
From the developer’s point of view, Astro adopts a syntax similar to HTML but with some extensions. .astro files can contain JavaScript scripts enclosed between --- delimiters, and offer automatic scoping for CSS. The project structure is simple and orderly:
src/
├── components/
├── layouts/
└── pages/Every file inside pages/ automatically becomes a route. For example, src/pages/about.astro corresponds to /about. To handle dynamic content, files with parameterized names are used:
src/pages/blog/[slug].astro → /blog/article-titleWithin an Astro component, parameters can be accessed like this:
const { slug } = Astro.params;
<h1>Post: {slug}</h1>;The rendering mechanism is highly flexible. By default, Astro uses Static Site Generation, but it is also possible to enable server-side rendering or a hybrid mode. This is configured in the astro.config.mjs file:
import { defineConfig } from 'astro/config';
export default defineConfig({
output: 'server', // or 'static' | 'hybrid'
});Layouts in Astro work as reusable templates. They can include header, footer, and slots where to inject dynamic content. Here’s a basic example:
// src/layouts/Base.astro
const { pageTitle = 'Hello HeroHubs!' } = Astro.props;<html lang="en">
<head>
<title>{pageTitle}</title>
</head>
<body>
<slot />
</body>
</html>And its use in a page:
import Base from '../layouts/Base.astro';
<Base pageTitle="Superhero">
<h1>Welcome to the site</h1>
</Base>;Astro is particularly suitable for content-oriented sites. Integration with Markdown and the ability to define collections via TypeScript allows treating static content as structured data:
// src/content/config.ts
import { z, defineCollection } from 'astro:content';
const blog = defineCollection({
schema: z.object({
title: z.string(),
publishDate: z.date(),
tags: z.array(z.string()),
}),
});
export const collections = {
blog,
};Collections also support custom types and automatic validation. If a required field is missing, Astro blocks the build, avoiding runtime errors.
For image management, Astro provides the @astrojs/image package, which allows automatic optimizations:
import { Image } from '@astrojs/image/components';
import hero from '../assets/hero.jpg';
<Image src={hero} width={400} alt="Hero image" />;Support for data fetching is complete. It is possible to fetch data from REST APIs or GraphQL, both during build and in SSR mode:
import { request, gql } from 'graphql-request';
const query = gql`
query {
posts {
title
content
}
}
`;
const { posts } = await request('https://example.com/graphql', query);
{
posts.map((post) => (
<article>
<h2>{post.title}</h2>
<p>{post.content}</p>
</article>
));
}Astro continues to evolve. With version 4, experimental features for predictive prerendering via Speculation Rules API, new options for dynamic path management, and improved accessibility rules through the Astro Dev Toolbar have been introduced.
In summary, Astro proves to be a powerful and modern solution for those who want to build fast, modular, and scalable sites. Its flexible ecosystem, compatibility with multiple frameworks, and ability to manage content in a structured way make it a particularly effective tool for blogs, documentation, landing pages, and editorial portals.
More information: astro.build