Esta página se muestra en inglés. Una traducción al español está en curso.

KnowledgeApr 3, 2026·2 min de lectura

Astro — Web Framework for Content-Driven Sites

Ship zero-JS by default. Island architecture for fast content sites, docs, and blogs. Supports React, Vue, Svelte. 58K+ stars.

AI Open Source · Community

Listo para agents

Instalación lista para agent

Este activo puede instalarse después de elegir el runtime, revisar el plan y ejecutar el comando correspondiente.

Native · 96/100Política: permitir

Superficie agent

Cualquier agent MCP/CLI

Tipo

Knowledge

Instalación

Single

Confianza

Confianza: Established

Entrada

astro.md

Comando de instalación directa

npx -y tokrepo@latest install 3a0c9468-b4cf-4f90-bdb6-4d9ede3d0b07 --target codex

Ejecutar después de confirmar el plan con dry-run.

TL;DR

Astro ships zero JS by default and uses islands for fast content-driven sites.

§01

What it is

Astro is an open-source web framework optimized for content-driven websites. It ships zero JavaScript to the browser by default, using an island architecture that hydrates only the interactive components. Astro supports React, Vue, Svelte, Preact, and Solid components in the same project, letting you mix frameworks as needed.

It targets developers building documentation sites, blogs, marketing pages, and content-heavy websites where page load speed and SEO matter most.

§02

How it saves time or tokens

Astro's zero-JS-by-default approach means your content pages load instantly without downloading or executing JavaScript bundles. For AI documentation sites and tool landing pages, this translates to better Core Web Vitals, higher search rankings, and lower bounce rates. The content collections API provides type-safe Markdown and MDX processing, eliminating custom parsing code.

§03

How to use

Create a new project:

npm create astro@latest
cd my-site
npm run dev

Open http://localhost:4321 and start building.

Write pages in Astro components:

---
// src/pages/index.astro
const title = 'My AI Tool';
---
<html>
  <head><title>{title}</title></head>
  <body>
    <h1>{title}</h1>
    <p>Built with Astro for maximum performance.</p>
  </body>
</html>

§04

Example

---
// src/pages/docs/[slug].astro
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
    const docs = await getCollection('docs');
    return docs.map(doc => ({
        params: { slug: doc.slug },
        props: { doc }
    }));
}

const { doc } = Astro.props;
const { Content } = await doc.render();
---
<html>
  <body>
    <article>
      <h1>{doc.data.title}</h1>
      <Content />
    </article>
  </body>
</html>

§05

Related on TokRepo

AI tools for documentation -- Documentation frameworks
AI tools for SEO -- SEO tools and optimization

§06

Common pitfalls

Astro renders static HTML by default. Interactive components need the client:load or client:visible directive to hydrate. Forgetting this directive means your React buttons will not respond to clicks.
Server-side rendering (SSR) mode requires an adapter for your deployment platform (Vercel, Netlify, Node). Static mode works everywhere but cannot handle dynamic routes.
Mixing multiple frameworks in one project works but adds bundle size when those components hydrate. Use one framework per island for best performance.

Preguntas frecuentes

What is island architecture?+

Island architecture renders the page as static HTML and hydrates only the interactive components (islands) with JavaScript. A page with a static article and one interactive chart only loads JavaScript for the chart. This reduces bundle size and improves load time compared to full-page hydration frameworks.

Can I use React components in Astro?+

Yes. Astro supports React, Vue, Svelte, Preact, Solid, and Lit components. Install the framework integration (e.g., @astrojs/react) and use components directly in .astro files. You can even mix frameworks on the same page.

Is Astro good for SEO?+

Yes. Astro's static HTML output means search engines see fully rendered content without executing JavaScript. Fast page loads improve Core Web Vitals scores. Built-in sitemap and RSS integrations further support SEO efforts.

How does Astro handle content?+

Astro's Content Collections API provides type-safe Markdown and MDX processing. You define a content schema, write Markdown files, and Astro validates and renders them. This works well for documentation, blogs, and any content-heavy site.

Can Astro handle dynamic data?+

Yes. In SSR mode, Astro renders pages on each request and can fetch data from APIs, databases, or CMS platforms. In static mode, data is fetched at build time via getStaticPaths. Hybrid mode lets you mix static and server-rendered pages.

Referencias (3)

Astro GitHub Repository— Astro ships zero JavaScript by default with island architecture
Astro Documentation— Astro supports React, Vue, Svelte, and other framework components
Astro Blog on Islands— Island architecture improves web performance by selective hydration