Let's Fight: React Framework Showdown 🥊

Muy bien. Así que hoy vamos a hablar sobre, vamos a hacer un enfrentamiento de todos los frameworks de React, o supongo que los más populares, debería decir. Solo quiero agregar un descargo de responsabilidad que cada framework tiene sus casos de uso y se realiza mucho trabajo para mejorar la web. Así que eso es algo que siempre debes tener en cuenta porque los frameworks son un montón de opiniones.

Así que déjame hacer esta pregunta. ¿Quién ha comenzado un nuevo proyecto de React y ha cuestionado todo? Por favor, levanta la mano. Vaya. Bastantes personas ya saben lo que están haciendo. Eso es genial. Pero ciertamente, cada vez que empiezo un nuevo proyecto de React, siempre me pregunto, ¿qué aplicación estoy construyendo? ¿Cuál es mi caso de uso? Y así sucesivamente. Así que eso es algo a tener en cuenta.

Así que en 2016, aproximadamente, React nos dio componentes. En 2019, aproximadamente, nos dio hooks. Y en 2025, nos dio confusión existencial. Y eso es porque hay mucho que está sucediendo con React y los frameworks de React. React de repente ha pasado de ser una biblioteca a este framework de pila completa, debería decir. Y hay tantos frameworks diferentes que vamos a examinar. Pero React ya no es solo una capa de vista. Tiene mucho más en juego. Así que el objetivo de hoy es elegir el mejor framework. Pero no cualquier framework. Sino un framework que no se supone que sea solo poderoso para cualquier tipo de aplicación, sino poderoso para la aplicación que estás construyendo específicamente. Es el que comparte tus creencias sobre cómo deberían construirse las aplicaciones. Así que si alguien te pregunta cuál es el mejor framework, es cualquier framework que funcione para ti en ese proyecto específico. Así que en tu empresa, puedes elegir un framework, digamos Next.js, pero por otro lado, optar por Tanstack o React Router o v7 y así sucesivamente.

Así que para presentarme rápidamente, mi nombre es Ankita. He estado trabajando en tecnología durante más de una década. He realizado todo tipo de roles, desde liderazgo senior hasta liderazgo técnico y también arquitecta de soluciones y mucho más. En los últimos años, me he estado adentrando en la educación tecnológica y enseñando a desarrolladores para que mejoren sus habilidades y también como enseñar desarrollo web, IA y contenido de SaaS. Este es mi canal de YouTube si quieres echarle un vistazo. Y todas las diapositivas y todo lo que tengo se publicará en este enlace específico. Así que definitivamente échale un vistazo si estás interesado.

También tomo el juramento de ser imparcial porque tengo que admitir que tengo mucho contenido de Next.js, por ejemplo. También he hablado y seleccionado tal vez algún otro framework en el pasado como mi framework favorito, que no es Next.js. Así que en esta presentación específica, quiero tomar un juramento de ser totalmente imparcial porque hay mucho en juego. Compararemos tres frameworks específicos, Next.js, React Router v7, o anteriormente tal vez Remix, y CanStack Start. Así que seamos reales. Vamos a dar un paso atrás un poco.

Esto es lo que muchos frameworks están tratando de evitar. Un spinner de la muerte, debería decir. Y digamos que tienes un navegador que está solicitando ilovecookies.com. Esto es lo que cualquier framework está tratando de hacer. Primero, están tratando de enviar una solicitud GET. Y típicamente lo que sucede es que obtendrías un shell de aplicación vacío. Ahora no queremos enviar un shell de aplicación vacío al usuario. El siguiente paso es pedir un montón de scripts. Y luego vamos a recibir un montón de scripts para ser descargados. Y por último, vamos a solicitar datos. Y a cambio, vamos a obtener algo de JSON. Y vamos a imprimir e hidratar la página con ilovecookies. Ahora, como puedes ver, esto puede ser realmente lento. No queremos mostrar a nuestros usuarios una página vacía. De hecho, podrías haber notado que muchos sitios web son realmente lentos incluso a veces con el Wi-Fi no siendo confiable o tu red de datos no siendo confiable. Así que algo a tener en cuenta. Luego viene SSR.

Pensamos que SSR iba a solucionar todo. ¿Verdad? Lo cual no lo hizo hasta cierto punto. Mismo sitio web, ilovecookies.com. Vamos a recibir una solicitud GET para ilovecookies.com. Pero esta vez, vas a obtener una página completa con datos, que es contenido HTML. Y luego vas a mostrar este hermoso esqueleto al usuario, ya no una página vacía. Y luego vamos a obtener los scripts, descargar los scripts, mientras el usuario ve este hermoso esqueleto, así que tienen algo que mirar y no una página en blanco. Y por último, vas a ver ilovecookies en la página. Y así es como, nuevamente, SSR resolvió muchos problemas para nosotros. Y fue una experiencia mucho mejor.

Pero, ¿qué pasa si tu servidor es lento? Va a tardar, digamos, un tiempo en cargar algo. Luego entra el streaming. Pensamos, está bien, sí, el streaming va a solucionar todo. Así que las partes de los datos que están listas se enviarán al usuario. Así que nuevamente, misma solicitud, ilovecookies.com. Obtenemos una página completa con datos. Pero datos que están listos. Así que ilovechocolatecookies se imprime en la pantalla, mientras el resto del contenido se está transmitiendo. Nuevamente, vamos a obtener los scripts, y el resto del contenido se va a hidratar a medida que se descargan los scripts. Así que esa es la evolución de la web y lo que los frameworks están tratando de resolver.

Así que los tres frameworks que vamos a analizar tendrán sus pros y contras, y vamos a ver y evaluar cómo funcionan todos. Así que cada framework afirma resolver esto, pero toman caminos muy diferentes para llegar allí. Así que quieres hacer una elección para el tipo de aplicación que estás construyendo. Por ejemplo, este es un SaaS que construí llamado proofybubble.com. Básicamente te ayuda a convertir visitantes del sitio web en clientes mostrando estas burbujas de ventas en vivo o suscriptores en vivo, y así sucesivamente. Hay una razón por la que te muestro esta aplicación. Para la pila tecnológica, elegí Next.js para la página de aterrizaje porque realmente quería contenido estático rápido. Pero la burbuja real que se renderiza en la página, no necesito un gran framework para eso, así que uso Wheat como constructor para básicamente construir el JavaScript más mínimo posible. ¿Podría haber usado Next.js en cualquiera de los frameworks de los que vamos a hablar? Por supuesto, pero ¿por qué agregar un bloat innecesario? Así que mirando hacia atrás, creo que también debería haber considerado otros frameworks para la parte de interactividad, que vamos a analizar. Pero nuevamente, a mi punto, elige un framework que funcione para ti.

Así que vamos a comparar y hacer un enfrentamiento basado en seis pilares, adopción, experiencia del desarrollador, rendimiento, enrutamiento, obtención de datos y despliegue. Estos son los principios y pilares fundamentales que deberías considerar cada vez que compares cualquier framework.

Así que hablemos, primero que nada, ¿qué es Next.js? Así que Next.js es un framework que está construido sobre React que te da todas las campanas y silbatos necesarios para construir aplicaciones escalables al permitirte renderizar contenido en el servidor. Ahora, cada framework tiene sus propias fortalezas. Por ejemplo, ¿qué hace especial a Next.

js? Nos da una forma realmente fácil de integrar SEO, que es la optimización para motores de búsqueda. Obtenemos una plataforma sin servidor desde el principio.

También tenemos muchos componentes diferentes que vamos a revisar. Tenemos componentes del servidor así como acciones del servidor, y también obtenemos división automática de código. Ahora, esto es lo que Next.js proporciona. Y los sitios que son ideales para Next.js son esencialmente cualquier sitio de comercio electrónico. Son grandes ejemplos para el contenido de Next.js porque cada vez que, digamos, vas a Amazon y tratas de renderizar un montón de productos, necesitas ese impulso de rendimiento inicialmente.

Así que, sitios como un sitio de comercio electrónico o incluso como páginas de aterrizaje como mi SaaS del que hablé o cualquier sitio de documentación son grandes ejemplos de Next.js porque estás sirviendo mucho contenido estático o incluso contenido híbrido, como contenido dinámico así como contenido estático también. También, un blog podría ser otro ejemplo.

Entonces, ¿qué es Remix o, debería decir, React Router v7? Hay mucho que sucede y muchos más cambios han ocurrido recientemente en términos de la dirección de React Router v7, que también es como Remix. Entonces, ¿qué lo hace especial?

Y obtienes la flexibilidad de usar un React router porque puedes crear un CDN estándar, una aplicación de una sola página alojada, o podrías migrar eso fácilmente y agregar SSR alojado también en cualquier servidor, que es la belleza de esto. Si quieres cosas regulares de React router que todos amamos y hemos estado usando, podemos hacerlo totalmente porque si lo piensas, mucho de lo que el framework proporciona es cuán hermoso es el router y cuán rápido es. Así que, React router ya tiene eso.

Y en una era donde hay soluciones complejas de JavaScript, React router apostará por los estándares web y el ecosistema de Vite como parte de eso. Ahora, hablemos de Tanstack. Es una capa delgada sobre el Tanstack router que ya conocemos y amamos, pero es más favorable para aplicaciones pesadas en el cliente. Así que, ¿recuerdas mi SAS de la que hablé? Mirando hacia atrás, siento que para la interactividad del panel, cuando necesitaba mucho renderizado del cliente, probablemente debería haber optado por Tanstack porque es realmente poderoso y útil para eso. Así que, Tanstack Start es un framework React de pila completa y está impulsado por el Tanstack router.

Obtienes todo el ecosistema con él siempre que estés usando Tanstack Start porque utiliza el router, tiene la consulta, y tienes un montón de diferentes elementos en el ecosistema de Tanstack. Así que, lo que Tanstack Start va a hacer es primero el servidor y luego el cliente. Así que, cada vez que se realiza una solicitud por primera vez al cliente, va a obtener los datos del servidor y cargarlos en la página.

La segunda vez que ocurre esta solicitud, ya tenemos los datos del servidor, así que Tanstack Start va a decir, hey, tengo esto y lo manejo todo usando React Query que, de nuevo, a muchos de nosotros nos encanta y lo obtenemos de la caché. Entonces, lo que hace que Tanstack sea realmente especial es que está completamente tipado. No puedo recordar cuántas veces he cambiado rutas en otros frameworks y todo se rompe y muchas veces no tengo idea de qué está funcionando y qué no. Tengo que depurarlo realmente o tal vez pedirle a la IA que lo haga. Pero aún así, con TypeScript, va a ayudar mucho porque está completamente tipado. Tiene streaming por defecto, como hablamos sobre lo que es el streaming. También tiene cargadores isomórficos. Eso significa cargadores que se ejecutan en el servidor inicialmente, luego en el cliente para navegaciones del lado del cliente, como también lo vimos. Ahora tiene funciones del servidor, lo cual es realmente genial, y eso facilita hacer llamadas basadas en el servidor. Ya tiene la integración de React Query, así que podrías usarlo de inmediato y usarlo directamente.

Y los sitios que son ideales para Tanstack serían este panel de mi SaaS del que hablé para Proofy Bubble. Estoy tratando de modificar esta burbuja y agregar mucha interactividad diferente. En este caso, tal vez podría haber usado Next.js o React Router. Pero idealmente, Tanstack es el mejor contendiente para esto porque esta es una aplicación pesada en el cliente. Tendrá mucha caché, muchos cambios que Tanstack Start simplemente va a gestionar. Así que cualquier tipo de paneles interactivos, paneles de administración, etc., Tanstack es un gran comienzo. Pero Tanstack Start no es ideal para ti si tu objetivo es un sitio renderizado en el servidor con cero JavaScript o interactividad mínima del lado del cliente, o si estás buscando un framework primero de React Server Components. De nuevo, esto llegará pronto. Así que Tanstack Start todavía está en beta, así que ten eso en cuenta. Quiero decir, no es realmente una comparación justa cuando otros frameworks ya están, ya sabes, siendo construidos y utilizados por muchas empresas, que Tanstack Start también está siendo utilizado, pero todavía está en beta, así que recuerda eso.

Y ya es tan poderoso, así que no puedo ni imaginar cuán poderoso sería después de su lanzamiento completo. Así que el siguiente pilar es la adopción, cuán fácil es adoptar cualquiera de estos frameworks. Así que si miras las estrellas en GitHub, tenemos 132K en Next.js, 55K para React Router, y luego para Tanstack, son 10.3K. Sin embargo, ten eso en cuenta, en términos del ecosistema, para todos estos, han estado... Next.js, aunque tal vez ha estado alrededor por mucho tiempo, pero React Router por su cuenta también ha estado alrededor por mucho más tiempo, y así ha estado React Query y así sucesivamente. Así que si lo miras de manera holística, entonces creo que cualquiera de estos frameworks sería una gran elección. En términos de descargas de NPM también, esto es algo que realmente obtuve de tanstack.com, y tiene una comparación realmente buena de cuántas descargas, descargas del último período, y así sucesivamente. Y ya puedes ver que React Router aquí es realmente un ganador. Pero ten en cuenta, React Router v7 salió bastante recientemente, o como hace más de un año, mientras que React Router ha estado alrededor por mucho tiempo.

Pero de nuevo, todos estos son números bastante buenos en los que podemos apoyarnos. Pero el ecosistema alrededor de Next.js, como mencioné, hace más de ocho años, es definitivamente superior, o ha estado mucho más tiempo en comparación con otros. Pero la curva de aprendizaje con Next.js, puede ser un poco más pronunciada en comparación con los otros dos. Por ejemplo, tenemos que aprender dos tipos diferentes de routers con Next.js, App Router y Pages Router. Tenemos acciones del servidor, componentes del servidor, diferentes comportamientos y versiones. Y definitivamente me he sentido frustrado cuando lo hice. Y también hay diferentes métodos de renderizado. Así que definitivamente hay una curva de aprendizaje empinada aquí.

Sin embargo, con React Router v7 y con Remix, y los cambios recientes en el ecosistema, definitivamente es un poco más complicado de adoptar ya que la dirección de lo que va a ser Remix y lo que va a ser React Router v7 está cambiando, lo que me hace dudar un poco en adoptar completamente debido a eso, en comparación con los otros dos frameworks. Así que si echas un vistazo a los puntos, le voy a dar 10 puntos a Next.js por adopción, mientras que a React Router v7, nueve, y de nuevo, 10 a Tanstack, nueve también, porque Next.js ha estado más tiempo y así sucesivamente.

Así que hablemos sobre el enrutamiento. De nuevo, Next.js tiene dos tipos diferentes de router, páginas así como el router de la aplicación. Con el router de páginas de Next.js, solo creas el nombre de la carpeta y usas el archivo index.js, y eso se convertirá en el archivo raíz. Si quieres rutas dinámicas, entonces usa ambos corchetes. Con el router de la aplicación de Next.js, tienes que usar convenciones de nomenclatura. Así que, por ejemplo, page.tsx expondrá esa ruta específica al navegador y el diseño con nuestros diseños y así sucesivamente. De nuevo, honestamente, muchas de estas son preferencias, ¿verdad? No a todos les encanta incluso un router basado en archivos. Con React Router v7, así es como creas una ruta, index.tsx, about.tsx, y cualquiera de las rutas dinámicas con el signo de dólar. Y con Tanstack, de nuevo, muy similar. Así que si lo miramos, y en términos de dar puntos, le voy a dar el mismo punto, porque de nuevo, es solo una cuestión de preferencia aquí. Es una muy buena manera para nosotros de usar el router y exponerlo.

Ahora, hablemos sobre la experiencia del desarrollador. Next.js ha recorrido un largo camino. Hay muchos nuevos patrones que aprender. El enrutamiento puede ser lento para aplicaciones centradas en el cliente, y dónde se ejecuta este código es una pregunta que muchos de nosotros hemos hecho. ¿Puedo usar UseEffect aquí? ¿Qué rompe la hidratación? Pero, obviamente, Next.js ha avanzado mucho en la última versión de Next.js, que es Next.js 15, donde los errores son mucho más obvios. Pero también debemos tener en cuenta que Next.js también adoptó los componentes del servidor de React temprano, dándonos un vistazo a cómo podría lucir React de pila completa antes de que la mayoría de los frameworks estuvieran listos. Así que eso es algo a lo que también debemos darle un poco de gracia. Con React Router y 10 stack, diría que debido a que utiliza Vite para el sistema de construcción, Vite es increíblemente rápido, y las herramientas de construcción actuales para la web son de 10 a 100 veces más lentas de lo que realmente podrían ser. Así que, dado que ambos utilizan Vite, ya es un muy buen comienzo. Por ejemplo, Vite utiliza un sistema basado en plugins, y como puedes ver, hay una función remix justo aquí, y eso es literalmente lo que es remix. Y con 10 stack, es una función de inicio de 10 stack aquí porque Vite utiliza un sistema de plugins, así que puedes pensar en ello como cajas de Lego de las que puedes elegir y seleccionar. Entonces, ¿dónde puede React Router ralentizarte? Bueno, está estrechamente acoplado a los estándares web, por ejemplo, así que puede volverse un poco complicado, por ejemplo, debido a su acoplamiento externo, y no tienes que hacerlo. A veces se vuelve demasiado estricto. Pero también significa que menos magia equivale a más decisiones, así que tienes que tomar muchas decisiones aquí cada vez que optas por React Router v7. Y en general, la experiencia es mejor cuando se trata de la experiencia del desarrollador. Es seguro en tipos, hay rutas API, división automática de código, y así sucesivamente. Así que cuando se trata de puntos, voy a darle a Next.js, a todos ellos los mismos puntos en términos de la experiencia del desarrollador en general. De nuevo, cortando dos puntos aquí y siendo un poco más estricto cuando se trata de la experiencia general.

Ahora hablemos sobre el rendimiento. Digamos que tenemos este sitio de comercio electrónico, y muchas aplicaciones de comercio electrónico utilizan imágenes. Así que cada vez que pienses en rendimiento, tienes que pensar en imágenes, de lo contrario tu sitio será realmente lento. Next.js tiene ImageComponent fuera de la caja que te da ese impulso de rendimiento de inmediato porque previene el cambio de diseño y tus imágenes pueden escalar según el viewport de tu navegador. Pero hay más. Hay fuentes, hay controles de caché que proporciona Next.js, hay un componente de script, hay división automática de código, hay un componente de enlace que prefetches rutas específicas antes de que el usuario esté listo para enrutarlas, y así sucesivamente. Y también hay prefetching de enlaces en los tres frameworks que permite transiciones instantáneas también. Pero Next.js puede ser lento para aplicaciones renderizadas en el cliente, la única razón es que su enfoque está principalmente en el servidor. Así que cuando se trata de TANstack, los cargadores isomórficos se ejecutan primero en el servidor, y luego cambian al cliente para la navegación del lado del cliente. Así que obtienes muchos beneficios de caché en comparación con otros frameworks. Así que diría que TANstack Start y React Query, es más grande, es mejor, y funciona sin problemas con React Query para controles de caché de grano fino. Y React Router, como todos sabemos, es simplemente rápido y se utiliza en muchas aplicaciones diferentes, y nunca he experimentado ninguna desaceleración específica.

Vaya. Así que cuando lo pensamos, vamos a dar estos puntos a estos tres frameworks cuando se trata de eso. Hablemos sobre la obtención de datos. Ahora, Next.js ha extendido la función fetch, así que podrías hacer algo como esto para los tres diferentes métodos de obtención de datos y simplemente agregar un atributo específico para el almacenamiento en caché. Así que puedes literalmente decir cache no store para renderizado del lado del servidor, revalidate para la expiración de la caché después de un cierto período, o force cache para renderizado estático. Ahora, estas son solo diferentes formas de cómo podrías hacer la obtención de datos con Next.js. Pero de nuevo, tiene componentes del servidor para fetch y acciones del servidor para cualquier tipo de mutaciones que desees. Así que así es como se ve el código si estás tratando de acceder al número de facturas y tratando de obtener los datos. Gran parte de nuestro código dentro de Next.js o con las últimas características de React se verá así. Donde dice acción del servidor, nos dan una directiva llamada use server que podríamos usar para exponer cualquier función y crear rutas HTTP para ello. Pero tienes que asegurarte de que agregas una capa de autenticación a esto. Cuando se trata de React Router, realmente me gusta este tweet específico de MJ, que dice que es literalmente como Wget. Y Wget obtiene y descarga todos los archivos específicos del navegador. Es el generador de sitios estáticos original. Así que obtienes registros, cookies, todas las cosas que normalmente obtenemos en un framework específico, lo cual es bastante agradable. Así que cuando pienso en la obtención de datos dentro de Remix o React Router, así es como se verá. Tienes acciones, tienes cargadores, y tienes componentes. Y el cargador solo se ejecutará en el servidor. Así que cargará los datos necesarios para que el componente se renderice. Y tendrá funciones de validación para validar las propiedades y demás. Luego tenemos TANstack, que básicamente se ve algo así. De nuevo, estoy tratando de trazar paralelismos solo para que entiendas qué tipo de opiniones quieres construir aquí para que puedas elegir el framework porque vas a escribir un código similar al que te estoy mostrando aquí porque lo he tomado de los proyectos existentes que tengo. De nuevo, este es un componente simple, que básicamente tiene un cargador, tiene un componente, y tiene el hook useLoader que básicamente invoca el cargador. Y luego tenemos componentes de error y también componentes no encontrados, y renderiza esos datos. Y así es como escribes funciones del servidor donde simplemente llamas a createServerFunction. Y ahora esto simplemente lo hace mucho más simple para invocar la función y usarla. Así que cuando se trata de esto, voy a dar 10 puntos a Next.js, 10 puntos a React Router, y 10 a TANstack también porque todos ellos son realmente buenos en términos de cómo obtenemos datos y nos dan muchos controles diferentes que necesitamos para hacer que nuestro framework sea seamless para integrar.

Por último, hablemos sobre la implementación. Ahora, todos ellos pueden ejecutarse en cualquier lugar. Ahora, sé que hubo algunos, diría que algunos problemas específicos o algunos desafíos con Next.js para poder ser desplegado fuera de una plataforma específica, pero eso ha cambiado recientemente y hay un gran impulso del equipo de Next.js para desplegarlo en cualquier lugar y en todas partes.

Así que eso es algo que necesitas tener en cuenta. Así que de nuevo, voy a deducir un punto por eso para Next.js, pero a todos ellos, les voy a dar lo mismo. Así que cada vez que tengas que pensar en cualquiera de estos frameworks de React, tienes que averiguar cuándo elegir cuál framework. Por ejemplo, quieres elegir Next.js siempre que haya optimizaciones integradas o quieras usar componentes del servidor. Necesitas controles de caché granulares y no quieres ninguna construcción personalizada de webpack. Quieres esa amplia adopción y soporte comunitario porque ha estado presente por más tiempo y puedes construir aplicaciones de manera bastante fluida. Además, si te estás enfocando en sitios de marketing, sitios estáticos, sitios de comercio electrónico, paneles de control de SaaS, y así sucesivamente, entonces quieres pensar en eso.

A continuación, tenemos React Router. Quieres preocuparte por la mejora progresiva, la accesibilidad, los estándares web, y eres un purista y realmente te importa eso, entonces ve con React Router v7. También tiene un enrutamiento profundamente anidado, lo que realmente te ayuda a construir aplicaciones muy dinámicas, y no hay limitación para la integración con plataformas en la nube. Y quieres optar por Tanstack si ya estás usando React Query o React Router, o Tanstack Router, que todos amamos, y eso es algo que quieres usar. O si tienes una aplicación pesada en el cliente, Tanstack realmente brilla y quieres usar eso. Y por último, te importa el streaming y SSR sin ninguna abstracción compleja debido a los cargadores isomórficos y demás.

De nuevo, te he lanzado mucho ahora mismo con los tres diferentes frameworks, pero basado en estos pilares, quería guiarte a través de cómo podrías tomar esta presentación, ir a tu equipo y discutir los diferentes puntos y pilares para que puedas elegir el mejor framework para tu proyecto. Así que en términos de ganador, ¿quién crees que es el ganador? Muy bien, ¿alguna otra respuesta? Hace mucho calor aquí. Lo entiendo. Así que diría que el ganador es Next.js porque ha estado presente por más tiempo. Tiene un amplio soporte comunitario, diferentes mecanismos de obtención de datos, componentes del servidor, y demás. Así que de nuevo, hace que sea mucho más fácil para nosotros usarlo. Al mismo tiempo, también depende. Depende de la aplicación que estés construyendo. Como dije, una aplicación pesada en el cliente, normalmente optaría por Tanstack start. O si ya estás usando React Router en tu empresa específica, entonces podrías hacerlo también. Al mismo tiempo, si quieres revisar más, consulta este sitio específico para más información sobre Next.js. Y muchas gracias. De nuevo, como todas mis diapositivas están publicadas aquí.