Stack tecnológico de React 2025

• Full-Stack React Tech Stack para 2025
  • Presenta tecnologías útiles para desarrollar un producto SaaS o un producto mínimo viable (MVP)
• Next.js: framework basado en React que ofrece por defecto diversas funciones como enrutamiento y caché, y facilita la conexión con el backend mediante funciones modernas de React como server components y server functions
• Astro: herramienta opcional para crear la landing page del producto, usada para construir páginas rápidas y mejorar la experiencia del desarrollador
• Server Components: componentes que se ejecutan en el servidor y permiten acceder a la base de datos, entre otras cosas, revolucionando la forma de desarrollar aplicaciones React full-stack
• Server Functions: funcionalidad que permite ejecutar código del lado del servidor desde componentes de React con solo llamar una función, generando automáticamente endpoints de API
• Server Actions: subconjunto de las server functions; existen librerías para mejorar su usabilidad, aunque también es posible implementarlas directamente
• Tailwind CSS: herramienta recomendada para desarrollar productos rápidamente y mantener el CSS a largo plazo; una vez que te acostumbras, es difícil volver al enfoque tradicional de CSS
• Shadcn UI: librería de UI que se integra de forma fluida con Tailwind CSS y propone un enfoque fresco para gestionar la interfaz al ofrecer un sistema sin versiones
• Lucide React: librería de íconos que suele usarse junto con Shadcn UI y que difícilmente necesita reemplazo hasta que aparezca una mejor alternativa
• TypeScript: estándar de la industria para proyectos de JavaScript, ya que mejora la experiencia del desarrollador, reduce errores y facilita el mantenimiento del código
• Zod: librería de validación que encaja muy bien con TypeScript; se usa principalmente para validación del lado del servidor, mientras que en formularios del cliente se aprovecha la validación nativa de HTML para reducir complejidad
• nuqs: herramienta para gestionar de forma type-safe el estado en la URL en Next.js (por ejemplo, búsqueda, ordenamiento y paginación); en otros frameworks pueden usarse funciones integradas u otras librerías
• Zustand: herramienta opcional para manejar estado del lado del cliente, cuyo uso ha disminuido por el estado en URL, el caché de datos del cliente y la evolución de las aplicaciones React guiadas por el servidor
• React Query: herramienta opcional usada para casos complejos de obtención de datos del lado del cliente, como el scroll infinito; si el proyecto no es muy complejo, los server components pueden ser suficientes
• Prisma (ORM): opción estable de ORM que podría sustituirse por Drizzle siguiendo las tendencias recientes, aunque por ahora se prefiere Prisma
• Supabase (base de datos): servicio que ofrece una base de datos Postgres; se usa solo la base de datos para mantener flexibilidad y se conecta con Prisma para facilitar un posible cambio a otra base de datos
• Lucia (autenticación): ya no recibe mantenimiento, pero sigue siendo útil como material de aprendizaje para construir sistemas de autenticación con Oslo, Argon2, Arctic, etc., permitiendo implementar una solución personalizada sin depender de terceros
• S3 (carga de archivos): con AWS S3, presigned URLs y AWS IAM se puede construir una solución flexible y económica para almacenar archivos; además, como la mayoría de servicios de terceros usan la misma API, es fácil cambiar de proveedor si hace falta
• Inngest (cola): herramienta usada para orquestar tareas complejas en el backend, adecuada para trabajos en segundo plano que no son sensibles al tiempo, y que ofrece un sistema de colas fácil de configurar y mantener
• React Email + Resend: el primero permite crear plantillas de correo con componentes de React, y el segundo es una excelente solución para envío de emails; tras cambiar desde Postmark a Resend, se obtuvieron resultados satisfactorios
• Vercel (hosting): solución de hosting para aplicaciones full-stack usada desde hace años; si se prefiere self-hosting, se recomiendan Hetzner/DigitalOcean y Coolify
• CloudFlare (dominio): tras varias experiencias con gestión de dominios, actualmente se usa con satisfacción por su excelente UI y por la posibilidad de adjuntar información adicional a los registros DNS
• Stripe (pasarela de pago): pasarela de pago usada desde hace años, con excelente documentación y API, aunque puede volverse compleja a medida que crecen sus funciones y el alcance de su API
• Testing y herramientas: la combinación de React Testing Library con Cypress/Playwright es una buena opción, y se recomiendan ESLint (en el futuro, Biome) y Prettier. Para documentar la UI se sigue usando Storybook, y para ejecutar TypeScript en la terminal se usa tsx

[moon5g]

Voy a investigar sobre nuqs, gracias.