Astro vs SvelteKit para contenido en 2026

Astro y SvelteKit dominan la conversación de "qué uso para mi blog, docs o marketing site" en 2026, y la pregunta útil no es cuál es mejor sino qué porcentaje del sitio es realmente interactivo. Astro gana cuando es menos del 30%, SvelteKit gana cuando supera el 50%, y entre medio depende del caso. Si el debate que tenés es más bien SvelteKit vs Next.js, el match-up está en SvelteKit vs Next.js para SEO.

Soy Ignacio y uso los dos en producción. Acá va la comparación práctica con criterios concretos para decidir.

¿Cuál es la filosofía de cada uno?

Astro:

• Islands architecture. El sitio es HTML estático por default; las "islas" de interactividad son componentes hidratados selectivamente.
• Zero JS por default. Si no le decís a Astro que un componente necesita JavaScript del lado del cliente, no se envía.
• Multi-framework. Podés escribir islas en Svelte, React, Vue, Solid, Preact: todos en el mismo proyecto.

SvelteKit:

• App framework completo. Pensado para sitios donde hay flow dinámico, auth, state compartido entre páginas.
• SSR + hidratación universal. Cada página puede ser estática, SSR pura, o SSR + hidratación según necesidad.
• Single-framework. Todo es Svelte.

La diferencia conceptual: Astro empieza desde "sitio estático" y suma interactividad; SvelteKit empieza desde "app" y permite estaticar páginas que no la necesitan.

¿Cómo comparan en performance real?

Mediciones tomadas de proyectos reales en 2026:

Métrica	Astro (blog 100p)	SvelteKit (blog 100p)
Bundle JS home	0-5KB	20-40KB
LCP mobile p75	1.1s	1.4s
INP mobile p75	60ms	100ms
CLS p75	0.01	0.02
Lighthouse mobile	99-100	95-98
TTFB Cloudflare edge	<80ms	<100ms

Para blog, docs o marketing puro, Astro tiene ventaja medible. Para apps con interactividad real, la ventaja desaparece. Si querés exprimir TTFB y CWV en el deploy, mirá Core Web Vitals en Cloudflare Pages.

¿Cómo se ve un componente en cada uno?

Astro:

---
// src/pages/articles/[slug].astro
import { getCollection, getEntry } from 'astro:content';
import Layout from '../../layouts/Layout.astro';
import SearchIsland from '../../components/Search.svelte';

const { slug } = Astro.params;
const article = await getEntry('articles', slug);
const { Content } = await article.render();
---

<Layout title={article.data.title}>
  <article>
    <h1>{article.data.title}</h1>
    <p>{article.data.description}</p>
    <Content />
  </article>
  
  <!-- Isla Svelte hidratada solo cuando es visible -->
  <SearchIsland client:visible />
</Layout>

Hidrata SearchIsland solo cuando entra al viewport. El resto es HTML estático.

SvelteKit:

<!-- src/routes/articles/[slug]/+page.server.ts -->
<script>
  import { loadArticle } from '$lib/content';
  
  export async function load({ params }) {
    const article = await loadArticle(params.slug);
    return { article };
  }
</script>

<!-- src/routes/articles/[slug]/+page.svelte -->
<script>
  let { data } = $props();
</script>

<svelte:head>
  <title>{data.article.title}</title>
</svelte:head>

<article>
  <h1>{data.article.title}</h1>
  {@html data.article.html}
</article>

Toda la página se hidrata, pero el componente es chico.

¿Cuál tiene mejor soporte para Markdown?

Astro, por integración nativa.

Astro Content Collections:

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

const articles = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string().max(155),
    publishedAt: z.date(),
    tags: z.array(z.string()),
  }),
});

export const collections = { articles };

Frontmatter tipado, validación automática en build, MDX soportado nativo. Cero setup adicional.

SvelteKit: Necesitás armarlo. En ignax.dev uso gray-matter + marked + Zod (mirá src/lib/content/markdown.ts en el repo). Es ~80 líneas y queda muy limpio, pero es trabajo manual.

Para sitios donde Markdown es el contenido principal, Astro es claramente más rápido de configurar.

¿Cuándo conviene Astro?

• Blogs personales y técnicos.
• Documentación de productos (con Starlight; la mejor stack docs en 2026).
• Marketing sites de SaaS.
• Portfolio simple.
• Sitios bilingues de contenido (con i18n built-in; para el hreflang fino, ver la guía de hreflang en SvelteKit + Paraglide).
• Sitios donde la mayoría del JS es analytics + un par de toggles.

¿Cuándo conviene SvelteKit?

• SaaS con dashboard + landing en mismo dominio.
• Apps con auth, sesiones, server actions.
• Sitios donde el contenido se mezcla con interactividad rica (editores, playgrounds, dashboards de datos).
• Cuando ya tenés una base SvelteKit y agregar Astro suma complejidad.
• Cuando querés SSR dinámico fino con load functions per-route.

¿Y la combinación?

Astro permite escribir islas en Svelte:

---
import InteractiveDashboard from '../components/Dashboard.svelte';
---

<Layout>
  <h1>Marketing static page</h1>
  <p>Lots of static content...</p>
  
  <!-- Componente Svelte rico hidratado solo cuando se necesita -->
  <InteractiveDashboard client:load />
</Layout>

Estrategia que funciona muy bien para SaaS:

• Marketing + docs en Astro (zero JS donde no hace falta).
• App real (/app/*) en SvelteKit o Next.js bajo subdominio.
• Componentes interactivos shared como islas Svelte en Astro y como componentes regulares en la app.

Es un poco más de setup pero da la mejor combinación de performance + DX para SaaS de 2026.

¿Cómo es AEO en cada uno?

Sin diferencia estructural. Ambos:

• SSR completo: HTML servido contiene el contenido extractable.
• Soportan JSON-LD vía componentes head.
• Permiten Quick Answers y FAQ schema sin trabajo extra.

Pero Astro tiene una ventaja indirecta: como sirve menos JavaScript, los crawlers de IA (que tienen tiempo y recursos limitados por página) procesan el sitio más rápido y completo. En sitios grandes con muchos artículos, eso se nota en velocidad de indexación.

Para el setup AEO completo independiente del framework, mirá qué es AEO.

¿Qué pasa con el ecosistema?

Astro:

• Comunidad joven pero activa. ~50k stars GitHub.
• Integraciones oficiales para Tailwind, React, Svelte, Vue, MDX, sitemap, RSS, etc.
• Starlight para docs es el mejor framework de docs en 2026.

SvelteKit:

• Comunidad mediana. ~80k stars GitHub.
• Ecosistema de librerías Svelte ricas pero menos plugins frameworky.
• Documentación oficial mejor que la de Astro.

Para hire, ambos están en LATAM y Europa. Devs con experiencia React aprenden Svelte más rápido que Astro porque Astro tiene conceptos propios (islands, multi-framework).

¿Cuál uso yo?

• ignax.dev (este sitio): SvelteKit. Tiene contenido + interactividad rica (Terminal, KonamiCode, navegación animada).
• Blogs y docs de clientes: Astro casi siempre.
• SaaS marketing + docs separado de la app: Astro para marketing/docs, SvelteKit/Next.js para la app.

La regla práctica: si el sitio es 80% contenido leído y 20% interactividad simple → Astro. Si es 50/50 o más interactivo → SvelteKit.

¿Por dónde decidís?

Tres preguntas:

1. ¿El sitio tiene auth, sesiones, o flow dinámico server-side? Sí → SvelteKit. No → seguís.
2. ¿La mayoría del contenido es estático (artículos, docs, marketing)? Sí → Astro. No → seguís.
3. ¿Tu equipo conoce ya alguno de los dos? Usá ese, salvo que la decisión técnica sea clara.

¿Qué diferencia hay en SEO de contenido extractable?

Para que ChatGPT, Perplexity y Claude te citen, ambos frameworks funcionan bien si servís SSR. Pero hay un matiz operativo:

• Astro: servís HTML completo desde build estático. No hay hidratación que retrasar lectura. Los crawlers de IA leen el contenido completo en el primer fetch.
• SvelteKit: servís HTML SSR pero la hidratación post-fetch puede generar diferencias entre HTML inicial y DOM final si tu app modifica contenido client-side. Esto es raro en sitios de contenido pero pasa.

La recomendación: en Astro, casi seguro estás bien. En SvelteKit, evitá modificar contenido textual visible después de hidratar, interacciones sí, contenido extractable no.

¿Y la curva de aprendizaje?

Para un dev React/Next.js:

• Astro: 1-2 semanas. Conceptos nuevos (islands, multi-framework) pero sintaxis cómoda.
• SvelteKit: 2-4 semanas. Aprender Svelte primero, después load functions, después convenciones de file-routing.

Para un dev nuevo (sin React):

• Astro: Más fácil arrancar porque el modelo "página = archivo" es claro.
• SvelteKit: También accesible. Svelte 5 con runes simplifica bastante.

Si tu equipo no tiene preferencia, los dos son aprendibles en 2-4 semanas.

Si querés discutir tu caso, escribime a [email protected]. Si arrancás un blog/docs, mirá también la stack que recomiendo en el servicio de motor de contenido. Referencias: Astro docs y SvelteKit docs.