Frontend on Commentary of Takao

React 19: Novedades que los desarrolladores deben conocer

Wed, 08 Jul 2026 10:00:00 +0900

Qué cambió en React 19

React 19 no es una actualización menor sino un cambio de paradigma. Server Components estables, nuevos hooks y el React Compiler cambian fundamentalmente cómo se escriben las aplicaciones.

Server Components estables

Los React Server Components (RSC) ahora están listos para producción. Al renderizar en el servidor y enviar HTML al cliente, reducen significativamente el tamaño del bundle. Los componentes que usan useState o useEffect deben declarar “use client”.

Tailwind CSS v4: Novedades y cambios

Thu, 05 Feb 2026 00:00:00 +0900

Tailwind CSS v4 es un rediseño completo. Usa el motor CSS nativo de Cascade Layers, configuración via CSS en lugar de JS, y nuevas utilidades.

Configuración via CSS

Adiós a tailwind.config.js. La configuración se hace en CSS con @theme, @utility, @variant. @import "tailwindcss" reemplaza las directivas anteriores.

Rendimiento

Engine de CSS nativo sin PostCSS. Compilación 10x más rápida. Cero dependencias de JavaScript en tiempo de ejecución.

Nuevas utilidades

inset-*, field-sizing-*, @starting-style para animaciones de entrada. color-mix(), light-dark(). Soporte mejorado para contenedores.

Next.js 15 Stable: Mejores prácticas en producción

Sun, 05 Oct 2025 00:00:00 +0900

Introducción

Next.js 15 llega con soporte para React 19, un modelo de caché rediseñado y mejoras importantes en APIs asíncronas. Por defecto, las solicitudes fetch NO se cachean, simplificando la previsibilidad del comportamiento.

React 19 estable

Next.js 15 se empareja con React 19 estable, permitiendo el React Compiler para memoización automática. Soporte completo para use() y Server Actions.

Cambios en caché por defecto

En Next.js 14, fetch se cacheaba por defecto. En Next.js 15 NO se cachea — debes optar explícitamente con cache: 'force-cache'.

Descifrando los mecanismos de caché del App Router de Next.js

Thu, 10 Apr 2025 00:00:00 +0900

Introducción

El App Router de Next.js tiene cuatro capas de caché que pueden causar confusión. Este artículo explica cada una y cómo configurarlas.

Las cuatro capas

Router Cache (cliente): Cache de navegación en el navegador, basada en sesión.
Request Memoization (servidor): Desduplica fetch dentro de un mismo ciclo de renderizado.
Data Cache (servidor): Persiste respuestas de API entre solicitudes y usuarios.
Full Route Cache (servidor): HTML estático y payloads RSC en tiempo de build.

Request Memoization

Si la misma URL se fetch múltiples veces en el mismo árbol de componentes, solo la primera ejecuta la llamada API. Las siguientes leen de la caché de memoización.

Transiciones de página suaves con View Transitions API

Sat, 05 Apr 2025 00:00:00 +0900

Introducción

La View Transitions API permite al navegador capturar estados de la página antes y después de una modificación del DOM, ejecutando una transición acelerada por hardware.

Configuración básica (SPA)

Envuelve tu función de actualización DOM en document.startViewTransition(). El navegador captura los estados saliente y entrante, ejecutando un crossfade de 0.25 segundos por defecto.

Personalización CSS

::view-transition-old(root) { animation: 0.3s ease-out both slide-out; }
::view-transition-new(root) { animation: 0.3s ease-out both slide-in; }

Crea transiciones de deslizamiento, fundido, o cualquier animación personalizada.

Lanzamiento oficial de React 19 y guía de funcionalidades prácticas

Wed, 05 Mar 2025 00:00:00 +0900

Introducción

React 19 representa un cambio de paradigma importante. Funciones antes restringidas a meta-frameworks como Next.js ahora están integradas en el núcleo estable de React.

Actions API y useActionState

Simplifica la gestión de mutaciones asíncronas. useActionState enlaza manejadores asíncronos directamente a atributos de formulario nativos, manejando automáticamente indicadores de carga.

useOptimistic

Para acciones interactivas como “me gusta” o envío de chats. Actualiza la IU instantáneamente antes de que la solicitud al servidor se complete, con capacidad de rollback integrada.