Elimina la mitad de tu frontend: Dónde HTMX reemplaza tu framework

<main id="app" hx-boost="true" hx-target="#app">
  <a href="/invoices">Facturas</a>
  <form action="/search" method="get">
    <input name="q">
  </form>
</main>

Los enlaces boosteados emiten un GET, empujan una entrada de historia, apuntan al body (o tu hx-target elegido), y hacen fallback gracefully.

2) Haz el estado direccionable por URL con hx-push-url

<div id="results"
     hx-get="/reports?period=Q2"
     hx-push-url="true"
     hx-target="#results"
     hx-trigger="change from:#period-select">
</div>

3) Tiempo real sin una SPA: SSE y WebSockets

<div id="feed" hx-ext="sse" sse-connect="/events" sse-swap="message"></div>

SSE corre sobre HTTP, atraviesa proxies limpiamente, y es unidireccional. La extensión maneja la reconexión y eventos nombrados.

<div hx-ext="ws" ws-connect="/ws/room">
  <div id="chat"></div>
  <form ws-send>
    <input name="message">
  </form>
</div>

Los mensajes entrantes pueden incluir snippets hx-swap-oob para actualizar objetivos en cualquier lugar de la página; la extensión encola mensajes salientes y reconecta con jitter.

4) Actualizaciones Out-of-Band para "mientras estás aquí..."

Devuelve el fragmento principal y una actualización de insignia en una respuesta:

<div id="modal">...</div>
<div id="alerts" hx-swap-oob="true">¡Guardado!</div>

La respuesta del servidor actualiza tanto el modal como la región de alertas.

5) Comportamiento del cliente: usa hyperscript/Alpine con moderación

• hyperscript favorece comportamientos pequeños y legibles inline: _="on click toggle .open on #menu"
• Alpine.js trae estado pequeño y reactivo cuando lo necesitas (dropdowns, tabs), y hay una extensión alpine-morph para preservar el estado de Alpine a través de swaps

---

Rendimiento, payload y velocidad percibida

• Tamaño del bundle: HTMX 2.x es ≈16–17 KB comprimido (más cualquier extensión que uses). Para muchas apps eso reemplaza 100–300 KB de framework + router + gestión de estado + código de hidratación.
• Arranques en frío: Sin boot/hidratación de framework, el tiempo interactivo es a menudo "HTML parseado" + "un pequeño eval de script".
• Red: Estás enviando fragmentos HTML, no JSON + templates de cliente. Eso ahorra duplicación (no "renderizar en servidor luego renderizar de nuevo en cliente") y permite a los CDNs cachear fragmentos agresivamente.

---

Historia, caché y la guía de 2025

HTMX históricamente hacía snapshot del DOM para navegar hacia atrás instantáneamente. En la práctica, scripts de terceros y peculiaridades del navegador hacen los snapshots frágiles. Los mantenedores ahora recomiendan deshabilitar el snapshotting por URL con hx-history="false" (o globalmente) y dejar que el navegador vuelva a obtener contenido en atrás/adelante. Aún obtienes historia correcta, pero menos heisenbugs y menor superficie de ataque de estado del cliente.

---

Seguridad: XSS, CSRF y corrección de fragmentos

• XSS: Estás renderizando HTML desde el servidor; escapa datos no confiables en el límite del template y mantén el auto-escape de tu motor de templating activado. La guía de XSS de OWASP aplica 1:1 aquí.
• CSRF: Incluye tokens CSRF en POST/PUT/PATCH/DELETE. Con Django, por ejemplo, usa csrf_token en formularios o añade el token vía hx-headers.
• Descargas de archivos: Porque HTMX usa XHR/fetch, generalmente rediriges el navegador (HX-Redirect) a un endpoint no-AJAX para descargas reales.

---

Comparación con frameworks modernos (edición 2025)

• React / Next.js: Server Components eliminan código de data-fetch del cliente y reducen hidratación, pero aún mantienes un grafo de componentes, límites y bundling; adoptas convenciones para streaming y capas de caché; y eliges componente de cliente vs servidor cuidadosamente. Esto es poderoso, pero pesado si tu UI es principalmente hypermedia clásica.
• Nuxt (Vue) y SvelteKit: Ofrecen historias SSR/ISR/híbridas igualmente excelentes y son geniales cuando necesitas estado de cliente rico y grandes bibliotecas de componentes.
• Hotwire/Turbo: El primo más cercano—un conjunto de herramientas nativas de Rails (Drive/Frames/Streams) para HTML-over-the-wire con buenas primitivas de tiempo real y una "sensación de SPA sin el bloat de SPA". HTMX te da la misma idea en un estilo agnóstico de framework, primero atributos.

---

Un ejemplo del mundo real: Pedidos en vivo (SSE + WebSockets), cero framework

Escenario

Estás construyendo una consola de "Pedidos en vivo" pequeña–mediana para una cadena de cafeterías. Requisitos:

• Lista de pedidos paginada con filtros y estado compartible por URL
• Inyección de fila "nuevo pedido" en tiempo real
• Botón para aceptar un pedido y ver el contador de insignias bajar
• Cambios de estado transmitidos (el display de cocina actualiza a todos)

1) Layout y navegación boosteada

<body>
  <header>
    <a href="/orders" hx-boost="true">Pedidos</a>
    <a href="/reports" hx-boost="true">Reportes</a>
    <span id="badge" class="badge">0</span>
  </header>

<main id="app" hx-boost="true" hx-target="#app">
    {{ template "orders/index.html" . }}
  </main>

<script src="/static/htmx.min.js"></script>
  <script src="/static/sse.js"></script>
  <script src="/static/ws.js"></script>
</body>

2) Filtro + estado de URL

<form id="filters"
      hx-get="/orders"
      hx-target="#orders"
      hx-push-url="true"
      hx-trigger="change delay:300ms from:#status,#search">
  <select id="status" name="status">
    <option value="">Todos</option>
    <option>NUEVO</option><option>PREP</option><option>LISTO</option>
  </select>
  <input id="search" name="q" placeholder="Buscar...">
</form>

<div id="orders">
  {{ template "orders/table.html" . }}
</div>

3) Actualizaciones en tiempo real (SSE)

<div id="realtime"
     hx-ext="sse"
     sse-connect="/events/orders"
     sse-swap="message"></div>

4) Aceptar pedido (viaje redondo de WebSocket)

<div hx-ext="ws" ws-connect="/ws/orders">
  <table id="orders-table">...</table>

<form ws-send onsubmit="return false">
    <input type="hidden" name="action" value="accept">
    <input type="hidden" name="order_id" value="{{ .ID }}">
    <button>Aceptar</button>
  </form>
</div>

5) Lista de verificación QA para producción

• Manejo de 404/401/422: Mapea códigos de respuesta a swaps o mensajes
• CSRF: Añade token vía input oculto o hx-headers
• Control de acceso: Los endpoints SSE y WS deben enforcar auth y scoping de tenant por conexión
• Backpressure: Throttle de flujos SSE/WS por usuario
• Caché: Cachea fragmentos HTML en el edge; purga en actualización
• A11y: Asegura que las regiones intercambiadas estén en regiones live (role="status" / aria-live="polite")
• Descargas de archivos: Usa HX-Redirect para disparar una descarga completa del navegador

---

Dónde brilla HTMX (resumen)

• Verdad renderizada en servidor: Sin duplicar validación/lógica de vista del cliente
• Velocidad: Runtime pequeño, sin impuesto de hidratación, tiempo real multi-transporte
• Mejora progresiva por defecto: Enlaces/formularios boosteados funcionan incluso con JS desactivado
• URL + historia en la que puedes confiar: Push state cuando importa, refetch en lugar de snapshot cuando es más seguro
• Componible con herramientas pequeñas: hyperscript/Alpine para estado local donde se necesite

Dónde HTMX es la herramienta equivocada

• Offline-first o estado de cliente pesado
• UIs de editor complejas que son esencialmente apps de escritorio en el navegador
• Grandes marketplaces de componentes donde necesitas SSR + CSR + hidratación + una gramática de componentes compartida—los frameworks aún ganan

---

Playbook de migración (React/Next/Nuxt → HTMX, cuidadosamente)

1. Elige una página (ej., "Pedidos"). Renderízala del lado del servidor con tus templates existentes.
2. Envuelve main en hx-boost, y asegura que cada enlace/formulario adentro navegue e intercambie en el objetivo principal.
3. Reemplaza un componente a la vez con un parcial del servidor + hx-get/hx-post.
4. Conecta la historia con hx-push-url para filtros marcables.
5. Añade SSE para actualizaciones pasivas; usa WS solo si el cliente debe hablar de vuelta.
6. Mantén una isla de framework donde sea verdaderamente necesario (editor rico, whiteboard). No fuerces la pureza.

---

La vista estratégica

La última década construyó motores de cliente para hacer que la web se sintiera como apps. La próxima década hará el compute fungible de nuevo: fragmentos HTML renderizados cerca de los datos, transmitidos a un cliente delgado y robusto que también puede hacer suficiente lógica local cuando sea necesario. React/Next/Nuxt/SvelteKit son ideales para problemas verdaderamente con forma de app. Pero mucho de tu producto sigue siendo documentos que cambian—formularios, tablas, listas, detalles, diálogos. HTMX mantiene esos honestos y rápidos.

Si estás empezando un proyecto pequeño o mediano en 2025, empieza con HTMX y añade una pizca de Alpine o hyperscript. Si estás construyendo una app grande, haz de HTMX el default para cada página que no demande una aplicación de cliente; reserva el framework para las partes que sí lo hacen.

Entregarás más rápido, debuggearás menos, y pasarás tu tiempo donde importa: el servidor que conoce tus datos.

---