Blog

  • Astro: el framework que decidió que el JavaScript era opcional

    El punto de partida

    Un framework como Next.js o Nuxt parte del supuesto de que estás construyendo una aplicación: hay estado, interacción, rutas dinámicas, sesión de usuario. Todo el JavaScript del framework viaja al navegador porque, tarde o temprano, se va a necesitar.

    El problema es que la mayoría de los sitios que se construyen con esas herramientas no son aplicaciones. Son blogs, landings, sitios institucionales, documentación, catálogos. Contenido que se lee. Y ahí estás pagando cientos de kilobytes de runtime para renderizar texto que podría ser HTML plano.

    Astro invierte el supuesto: asume que estás construyendo un sitio de contenido y que la interactividad es la excepción, no la regla. Compila todo a HTML estático y elimina el JavaScript que no se usa. Un blog hecho en Astro puede llegar al navegador con literalmente cero bytes de JS.

    La arquitectura de islas

    Es el concepto central y vale entenderlo bien.

    En lugar de hidratar toda la página, Astro renderiza HTML estático y permite marcar componentes puntuales como «islas» interactivas. Cada isla carga su JavaScript de forma independiente y solo cuando corresponde.

    astro

    ---
    import Header from '../components/Header.astro';
    import Carrusel from '../components/Carrusel.jsx';
    import Calculadora from '../components/Calculadora.jsx';
    ---
    
    <Header />
    
    <Carrusel client:load />
    <Calculadora client:visible />

    Las directivas controlan cuándo se activa cada isla:

    • client:load — hidrata apenas carga la página.
    • client:idle — espera a que el navegador esté ocioso.
    • client:visible — hidrata recién cuando el componente entra en pantalla.
    • client:media — solo si se cumple una media query (ideal para menús que difieren en mobile).
    • client:only — se renderiza únicamente en el cliente.

    El Header del ejemplo no lleva directiva, así que es HTML puro: no cuesta nada. La calculadora, que está al pie de la página, ni siquiera descarga su JavaScript hasta que el visitante llega ahí. Es una diferencia enorme en el Largest Contentful Paint de un sitio con contenido largo.

    Agnóstico de framework

    Otro punto que sorprende a quien viene de React: en Astro las islas pueden estar escritas en React, Vue, Svelte, Solid o Preact, en el mismo proyecto. Se instalan como integraciones y conviven sin problema.

    En la práctica esto significa que podés reutilizar un componente que ya tenías en React sin migrarlo, y escribir el resto del sitio en .astro, que es básicamente HTML con frontmatter y sintaxis tipo JSX. Si sabés HTML y algo de JS, la curva es de un par de horas.

    Colecciones de contenido

    Para blogs y catálogos, esta es la funcionalidad que más trabajo ahorra. Definís un esquema con Zod y Astro te valida cada archivo Markdown en tiempo de build:

    ts

    import { defineCollection, z } from 'astro:content';
    
    const notas = defineCollection({
      schema: z.object({
        titulo: z.string(),
        copete: z.string(),
        fecha: z.date(),
        keywords: z.array(z.string()),
        portada: z.string().optional(),
      }),
    });
    
    export const collections = { notas };

    Si te olvidás la fecha en una nota, el build falla con un mensaje claro en lugar de publicar una página rota. Y todo el contenido queda tipado, así que el editor te autocompleta los campos.

    Dónde está Astro hoy

    La versión 7 salió el 22 de junio de 2026 y el foco fue casi todo rendimiento de build: compilador reescrito en Rust, migración a Vite 8 con Rolldown y un nuevo parser de Markdown, también en Rust. Para proyectos grandes, con cientos de páginas de contenido, la diferencia en tiempos de compilación es la mejora más visible. Requiere Node 22 como mínimo, así que conviene revisar el entorno antes de actualizar.

    También sumó detección de agentes de IA y mejoras de caché en el ruteo, dos temas que ganaron peso este año. Y desde la versión 6 el framework tiene respaldo corporativo de Cloudflare, lo que despeja bastante la duda razonable de «¿esto va a seguir existiendo en tres años?».

    Astro vs. las alternativas

    Contra WordPress: Astro gana en velocidad, seguridad (no hay base de datos ni panel expuesto) y costo de hosting (un sitio estático se sirve gratis o casi). Pierde en gestión de contenido: si el cliente necesita cargar entradas solo desde un panel, sin tocar archivos, necesitás sumarle un CMS headless. Existe la combinación WordPress como backend y Astro como frontend, que resuelve las dos cosas, pero es más infraestructura para mantener.

    Contra Next.js: para una aplicación con sesión, dashboard y estado compartido, Next sigue siendo la elección correcta. Para un sitio de contenido, Next es una herramienta desproporcionada.

    Contra HTML y CSS a mano: Astro te da componentes, layouts, colecciones tipadas y optimización de imágenes sin renunciar al resultado estático. Es lo que uno haría a mano, pero organizado.

    Cuándo conviene

    Sí:

    • Blogs, sitios institucionales, landings, documentación, portfolios.
    • Catálogos que no necesitan carrito.
    • Proyectos donde el SEO y la velocidad de carga son el objetivo principal.
    • Frontends que consumen una API propia y son mayormente de lectura.

    No, o con reservas:

    • Aplicaciones con mucho estado compartido entre pantallas.
    • Sitios donde el cliente necesita autonomía total de edición y no querés sumar un CMS.
    • E-commerce complejo con stock en tiempo real, variantes y checkout propio: es posible, pero WooCommerce o Shopify te ahorran meses.

    En resumen

    Astro no compite por ser el framework más potente, sino por ser el más proporcionado a lo que la mayoría de los sitios necesita. La pregunta que resuelve es simple: si la página es contenido que se lee, ¿por qué le estás mandando al visitante un runtime completo de JavaScript?

    Para un desarrollador que ya trabaja con React o con WordPress, la inversión de aprenderlo es baja y el retorno se nota en la primera medición de PageSpeed. Vale la pena tenerlo en el toolkit aunque no sea la herramienta de todos los proyectos.

  • Tailwind CSS o CSS tradicional: la discusión mal planteada

    Qué está en discusión (y qué no)

    Conviene aclararlo de entrada: Tailwind es CSS. No reemplaza al lenguaje ni te exime de entenderlo. Si no sabés cómo funciona flexbox, flex gap-4 items-center te va a fallar igual que display: flex. Lo que cambia es dónde escribís los estilos y cómo los organizás.

    En el enfoque tradicional escribís reglas en un archivo .css o .scss y las aplicás mediante clases semánticas: .card, .card__title, .btn--primary. En el enfoque utility-first componés el diseño directamente en el marcado con clases atómicas de propósito único: rounded-lg, p-6, text-sm.

    La discusión real no es «cuál es mejor», sino qué problema estás tratando de resolver.

    El problema que Tailwind vino a resolver

    Cualquiera que mantuvo un CSS grande conoce estos síntomas:

    • Nadie borra nada. Ante la duda de si .header-old-v2 se sigue usando, se deja. El archivo solo crece.
    • La especificidad se descontrola. Aparece el primer !important y ya no hay vuelta atrás.
    • Nombrar cuesta más que estilar. Metodologías como BEM existen justamente porque poner nombres consistentes a nivel equipo es difícil.
    • Todo es global. Tocás una regla para arreglar una sección y rompés otra que no estabas mirando.

    Tailwind ataca esos cuatro puntos de raíz. Las clases utilitarias son de alcance local por definición, no hay que inventar nombres, la especificidad es plana y el CSS no crece de forma indefinida: siempre son las mismas utilidades reutilizadas.

    Lo que se pierde en el camino

    Tampoco es gratis:

    El marcado se vuelve ruidoso. Un botón puede terminar con quince clases. Es legible cuando lo escribiste vos, menos cuando abrís un archivo ajeno seis meses después.

    Hay curva de aprendizaje. Aunque sea CSS, hay que memorizar la nomenclatura. mt-4 es margin-top: 1rem, pero eso hay que saberlo.

    Requiere build. Tailwind necesita un paso de compilación. En un entorno donde solo podés subir archivos por FTP a un hosting compartido, eso complica cosas.

    Duplicación en el HTML. Si repetís la misma combinación de veinte clases en diez lugares y no estás trabajando con componentes, cambiar el diseño implica editar diez veces. Tailwind asume que tenés componentes (React, Vue, partials de Blade, bloques de WordPress). Sin esa capa, el argumento se debilita bastante.

    Qué cambió con Tailwind 4

    Vale mencionarlo porque modifica varias objeciones históricas. La versión 4 movió la configuración al propio CSS: en lugar de un tailwind.config.js, se define el sistema de diseño con @theme directamente en la hoja de estilos.

    css

    @import "tailwindcss";
    
    @theme {
      --color-marca: #e5662f;
      --font-display: "Sora", sans-serif;
      --radius-card: 12px;
    }

    Esas variables quedan disponibles como utilidades (bg-marca, font-display) y también como custom properties nativas de CSS, así que se pueden usar en CSS común dentro del mismo proyecto. La frontera entre «usar Tailwind» y «usar CSS» se volvió mucho más porosa. Además el motor nuevo compila bastante más rápido y la detección de clases ya no requiere configurar rutas a mano.

    Comparación práctica

    CriterioCSS tradicionalTailwind
    Velocidad al prototiparMediaAlta
    Curva inicialBajaMedia
    Escalabilidad en equipoDepende de la disciplinaAlta por defecto
    Peso finalCrece con el proyectoEstable
    Legibilidad del marcadoAltaMedia
    Legibilidad de los estilosMediaAlta
    Necesita buildNo
    Consistencia del diseñoRequiere convenciónForzada por el sistema

    Cuándo elegir cada uno

    Elegí CSS tradicional cuando:

    • El proyecto es chico y no justifica una toolchain.
    • Trabajás sobre un tema de WordPress clásico sin build, o retocás estilos de un maquetador visual como Elementor.
    • Necesitás animaciones complejas, @supports, selectores muy específicos o control fino que en utilidades se vuelve incómodo.
    • El sitio lo va a mantener alguien que no conoce Tailwind y no va a aprenderlo.

    Elegí Tailwind cuando:

    • Trabajás con componentes: React, Vue, Astro, Livewire, bloques nativos.
    • El proyecto va a crecer y lo van a tocar varias personas.
    • Querés un sistema de diseño consistente sin escribir la documentación de tokens a mano.
    • Estás iterando diseño rápido y necesitás ver cambios sin saltar entre archivos.

    La opción que casi nadie menciona: las dos

    En la práctica, los proyectos que mejor envejecen usan un híbrido. Tailwind para el layout, el espaciado y las variantes de estado, y CSS propio para lo que las utilidades hacen incómodo: keyframes, estilos de contenido generado por un editor, resets específicos, o esos tres componentes que se repiten en todo el sitio y merecen su propia clase.

    Tailwind incluso lo contempla con @apply, aunque conviene usarlo con moderación: abusar de @apply es reconstruir el CSS tradicional con pasos extra.

    En resumen

    CSS tradicional te da libertad total y te cobra en disciplina. Tailwind te quita algo de libertad y te devuelve consistencia y velocidad. Ninguna de las dos cosas es universalmente mejor, y la mayoría de las discusiones online se producen porque cada uno está pensando en un proyecto de escala distinta.

    La pregunta útil no es cuál está de moda, sino: ¿este proyecto tiene componentes?, ¿lo va a tocar más gente?, ¿va a vivir tres años? Si respondés que sí a las tres, Tailwind te va a ahorrar trabajo. Si respondés que no, el archivo .css de siempre sigue siendo una decisión perfectamente profesional.

  • Tu sitio WordPress no está roto: está desatendido

    Tu sitio WordPress no está roto: está desatendido

    El problema no suele ser WordPress

    Cuando un cliente me dice «mi página anda lenta», la primera reacción es culpar a la plataforma. Pero WordPress mueve cerca del 40% de la web y no es lento por naturaleza: se vuelve lento por acumulación. Cada plugin que se instaló «para probar» y quedó activo, cada imagen de 4 MB subida directo desde el celular, cada actualización que se pateó para adelante por miedo a romper algo, suma peso.

    La buena noticia es que casi todo eso se revierte. La mala es que si nadie lo revisa, el deterioro es constante.

    Seis señales de que tu sitio necesita mantenimiento

    1. Tarda más de tres segundos en cargar

    Es el número que importa. Después de ese umbral, la tasa de rebote se dispara y Google lo registra en las Core Web Vitals. Probalo en PageSpeed Insights con tu celular y datos móviles, no con la fibra de la oficina.

    Qué hacer: empezá por las imágenes. En la mayoría de los sitios que audito, entre el 60% y el 80% del peso total de una página son imágenes sin comprimir. Convertirlas a WebP y servirlas en el tamaño real que se muestran suele bajar el tiempo de carga a la mitad sin tocar una línea de código.

    2. Tenés más de 20 plugins activos

    No hay un número mágico, pero cada plugin carga sus propios CSS y JavaScript en todas las páginas, incluso donde no se usa. Un plugin de formularios que solo hace falta en «Contacto» está cargando en la home, en el blog y en cada ficha de producto.

    Qué hacer: auditá la lista. Desactivá lo que no reconozcas, eliminá lo que no uses (desactivado sigue ocupando espacio y sigue siendo una puerta de entrada) y buscá superposiciones: es común encontrar dos plugins de caché peleándose o tres soluciones de SEO instaladas.

    3. El panel te muestra actualizaciones pendientes hace meses

    Acá hay un equilibrio real. Actualizar a ciegas puede romper el diseño; no actualizar nunca te deja expuesto. La enorme mayoría de los sitios WordPress hackeados no cayeron por un ataque sofisticado, sino por una vulnerabilidad conocida en un plugin desactualizado con parche disponible.

    Qué hacer: entorno de staging, backup previo, actualizar, revisar, publicar. Si no tenés staging, al menos backup completo antes de tocar nada. Y actualizá de a poco: primero plugins críticos, después el resto.

    4. No sabés cuándo fue el último backup

    Si la respuesta es «creo que el hosting hace uno», no tenés backup. Tenés una esperanza. Muchos planes de hosting compartido guardan copias de siete días y las sobrescriben, así que si el problema apareció hace diez, ya no hay a dónde volver.

    Qué hacer: backups automáticos de archivos y base de datos, con copia fuera del servidor (Drive, Dropbox, S3). Y probá una restauración al menos una vez. Un backup que nunca restauraste es un backup que no sabés si funciona.

    5. La base de datos nunca se limpió

    Cada vez que guardás una entrada, WordPress crea una revisión. Un sitio con tres años de vida puede tener miles de revisiones, transients vencidos, comentarios spam y tablas huérfanas de plugins que borraste. Nada de eso se ve, pero todo pesa en cada consulta.

    Qué hacer: limitá las revisiones desde wp-config.php, limpiá transients y spam periódicamente y optimizá las tablas. Es trabajo de media hora que se nota en el tiempo de respuesta del servidor.

    6. En el celular se ve distinto a como lo diseñaste

    Más de dos tercios del tráfico de un sitio pyme en Argentina llega desde el teléfono. Si el menú se superpone, los botones quedan chicos para el dedo o hay scroll horizontal, estás perdiendo consultas todos los días sin enterarte.

    Qué hacer: revisá el sitio en un dispositivo real, no solo en el modo responsive del navegador. Prestá atención a los formularios y al checkout si vendés online: es donde más plata se cae.

    Un plan mínimo de mantenimiento

    No hace falta un contrato grande para tener el sitio sano. Un esquema realista para una pyme:

    • Semanal: backup automático verificado y revisión rápida de que todo cargue.
    • Mensual: actualizaciones de core, plugins y tema en staging; limpieza de spam y transients.
    • Trimestral: auditoría de rendimiento con PageSpeed, revisión de enlaces rotos y control de plugins que dejaron de tener soporte.
    • Anual: revisión del hosting, del plan contratado y de si el stack sigue siendo el adecuado para lo que el negocio necesita hoy.

    Lo que realmente estás cuidando

    Un sitio lento o caído no es un problema técnico, es un problema comercial. Es el cliente que buscó tu producto, entró, esperó y se fue a la competencia. El mantenimiento no es un gasto que se agrega al desarrollo: es lo que hace que la inversión del desarrollo siga rindiendo dos años después.

    Si hace más de seis meses que nadie mira tu WordPress, empezá por lo más barato: medí la velocidad, contá los plugins y confirmá que existe un backup reciente. Con esas tres respuestas ya sabés en qué estado estás.