Tendencias de React en 2025

 (robinwieruch.de)
16 puntos por xguru 2025-03-24 | 1 comentarios | Compartir por WhatsApp
  • React está evolucionando hacia un framework full-stack que rompe la frontera entre cliente y servidor
  • La posición dominante de Next.js se está debilitando, y TanStack Start y React Router están surgiendo como competidores
  • Se están fortaleciendo funciones de React como formularios, manejo de estado, componentes de servidor y adopción de IA
  • Los desarrolladores de React necesitarán familiarizarse con entornos full-stack de ahora en adelante

React Server Components (RSC)

  • React Server Components (RSC) es una función que reduce el tamaño del bundle de JavaScript del lado del cliente y optimiza el rendimiento
    • Primer anuncio: 21 de diciembre de 2020
    • Primera implementación: introducción de App Router en Next.js 13 (2022)
    • Alcanzó un estado más estable en Next.js 15 (2024)
    • Se espera que React Router y TanStack Start también incorporen RSC pronto
  • Cómo funciona RSC
    • Se ejecuta una vez en el servidor y solo el resultado renderizado se envía al cliente
    • Reduce la cantidad de JavaScript del lado del cliente
    • Permite acceder a bases de datos y APIs desde el servidor (mayor seguridad)

React Server Functions (RSF)

  • React Server Actions (RSA) → una forma evolucionada de RSC, que permite modificar y actualizar datos en el servidor
    • Ejecuta funciones del servidor con un enfoque de llamada a procedimiento remoto (RPC) sin definir rutas API
    • Usa la directiva use server
  • React Server Functions (RSF)
    • En septiembre de 2024, el equipo de React presentó RSF como un concepto más amplio que incluye RSA
    • Puede funcionar tanto en RSC como en componentes de cliente
    • Incluye tanto tareas de lectura como de modificación de datos
  • Está previsto que Next.js, TanStack Start y React Router lo implementen

Mejoras en React Forms

  • En React 19, las funciones relacionadas con formularios mejoraron de forma importante
    • El atributo action de <form> permite invocar acciones de servidor directamente
    • Se agregaron nuevos hooks
      • useFormStatus, useOptimistic, useActionState
    • Mejoró el manejo de estados complejos de formularios
  • Compatibilidad con librerías existentes
    • Se pueden seguir usando librerías existentes como React Hook Form
    • La capacidad nativa de React para manejar formularios se volvió más potente y flexible

Library vs Framework (librería vs framework)

  • React ahora va más allá de ser una simple librería y adopta características de framework
    • Soporta client-side rendering (CSR), server-side rendering (SSR), static site generation (SSG) e incremental static regeneration (ISR)
    • Para usar funciones como RSC y RSF es necesario usar un framework específico (por ejemplo, Next.js)
  • Es necesario elegir según los requisitos del proyecto
    • App simple del lado del cliente → se puede usar React por sí solo
    • Si se necesitan funciones del lado del servidor → se requiere un framework como Next.js, TanStack Start o React Router

Se intensifica la competencia entre frameworks de React

  • Next.js sigue siendo el framework más popular
  • Es muy probable que TanStack Start y React Router surjan como competidores en 2025
    • TanStack Start → un nuevo framework basado en TanStack Router
    • React Router → una evolución de Remix que refuerza su carácter de framework
  • Ambos frameworks planean soportar RSC y RSF

Full-Stack React

  • La incorporación de funciones centradas en el servidor en React → está impulsando su evolución hacia aplicaciones full-stack
    • Acceso a bases de datos mediante RSC y RSF
    • Se necesita infraestructura backend como autenticación, permisos y caché
    • También se simplifica la comunicación entre cliente y servidor
  • Aumenta la posibilidad de construir aplicaciones de IA basadas en React

La "shadcnificación" de React

  • Shadcn UI → se está consolidando como la librería base de UI de React, similar a Tailwind CSS
    • Ofrece componentes con estilos predefinidos
    • Permite personalización
  • Podrían surgir nuevos enfoques de UI
    • Actualmente, muchos proyectos están empezando a verse parecidos

React y la IA

  • Aumenta la generación de código React con IA
    • Herramientas de IA (como v0) generan código React automáticamente
  • Aumenta la construcción de aplicaciones impulsadas por IA
    • Con soporte de Vercel AI SDK, LangChain y otros

Biome (antes Rome)

  • Resuelve los problemas de integración entre ESLint y Prettier
  • Herramienta rápida y consistente basada en Rust
    • Ganó el premio de $20,000 de Prettier (2023)
  • Es muy probable que Biome se consolide como el toolchain de próxima generación para React

React Compiler

  • React Compiler → una herramienta para automatizar la optimización de rendimiento
    • Gestiona automáticamente useCallback, useMemo y memo
    • Ya no hace falta memoización manual
    • Actualmente ofrece una versión beta en React 19

Lecturas relacionadas