Zustand y Tanstack Query están muertos gracias a Next.js

Zustand y Tanstack Query están muertos gracias a Next.js

Desde que los React Server Components (RSC) se convirtieron en el estándar con Next.js, la forma en que estructuro mis proyectos ha cambiado radicalmente. 🚀

Para recordar: ambas bibliotecas son “gestores de estado”:

• Tanstack Query: Estado del servidor
• Zustand: Estado de la aplicación (UI)

Mi razonamiento:

1️⃣ Adiós a las APIs innecesarias:
Con los Server Components, puedo realizar llamadas directamente a mi base de datos o servicios externos desde el servidor. Ya no necesito bibliotecas como Tanstack Query para gestionar el “estado del servidor” en el lado cliente.

2️⃣ Reducción máxima del código cliente:
Reduzco el uso de componentes cliente tanto como sea posible, limitándolos al mínimo y colocándolos lo más abajo posible en el árbol de componentes React.

• Menos componentes cliente = menos estado que gestionar.
• Para los casos raros en los que el código cliente es necesario (interacciones locales, animaciones, etc.), la Context API de React es más que suficiente.
• ¿Por qué añadir herramientas como Zustand si las funcionalidades nativas ya cubren las necesidades?

3️⃣ Simplificación de los bundles:
Menos bibliotecas en el lado cliente = mejor rendimiento (tamaño del bundle más pequeño) y un código más sencillo de mantener.

🚫 ¡Deja de desarrollar aplicaciones Next.js con una mentalidad de “desarrollador front-end de React”!

En Next Mastery, cubrimos estas nuevas aproximaciones al desarrollo...

Para equilibrar mi publicación:

3 ejemplos de proyectos que no requieren Zustand ni Tanstack Query:

1️⃣ Blog o sitio de contenido estático/dinámico

• Los datos se cargan en el lado servidor con React Server Components (por ejemplo, artículos, categorías).
• ¿Por qué? No hay un estado complejo del lado cliente; todo se obtiene y renderiza mediante RSC.

2️⃣ Panel de análisis simple

• Los datos agregados (como ingresos o usuarios activos) se obtienen directamente con Server Components. Las interacciones cliente son mínimas.
• ¿Por qué? Los datos se pre-renderizan y se actualizan en el servidor, sin necesidad de gestionar estado en el cliente.

3️⃣ Landing page con un formulario

• Un sitio simple con un formulario (por ejemplo, registro o contacto). La validación se realiza en el servidor y con bibliotecas ligeras como React Hook Form.
• ¿Por qué? No hay necesidad de gestionar estado persistente ni sincronización con un servidor de forma continua.

3 ejemplos de proyectos que sí requieren Zustand o Tanstack Query:

1️⃣ Aplicaciones con interacciones complejas del usuario

• Ejemplo: Una aplicación de gestión de tareas con drag & drop, donde los usuarios pueden reorganizar tareas o modificar estados localmente antes de sincronizarlos con el servidor.
• ¿Por qué Zustand? Para gestionar el estado local de las tareas (posición, estado, etc.).
• ¿Por qué Tanstack Query? Para sincronizar los cambios con el servidor una vez validados.

2️⃣ Aplicaciones que usan muchas APIs externas

• Ejemplo: Una aplicación que depende de múltiples APIs de terceros para mostrar datos como información de productos, reseñas de clientes o tasas de cambio.
• ¿Por qué Zustand? Para gestionar estados temporales o locales entre las diferentes secciones de la aplicación (carga, preferencias del usuario, estados intermedios).
• ¿Por qué Tanstack Query? Para gestionar el almacenamiento en caché, la sincronización y las actualizaciones automáticas de los datos provenientes de varias APIs externas, reduciendo llamadas innecesarias y mejorando el rendimiento.

3️⃣ Aplicaciones de chat en tiempo real

• Los mensajes se obtienen del servidor (a través de WebSocket o polling), pero también requieren gestión local para borradores, conversaciones abiertas, etc.
• ¿Por qué Zustand? Para almacenar localmente el estado de las conversaciones, mensajes no enviados, etc.
• ¿Por qué Tanstack Query? Para sincronizar los mensajes y mantener la consistencia con el servidor.

¿Y tú?

• ¿Cómo usas Zustand o Tanstack Query en tus proyectos?
• ¿Crees que los Server Components cambiarán las reglas del juego?