Transcript

00:00:00Tan Stack Start está generando mucho revuelo estos días,
00:00:03y la pregunta es: ¿deberías cambiar de Next.js?
00:00:06¿Es mejor que Next.js?
00:00:08Ayer tuve una transmisión en vivo completa donde comparé ambos y construí dos aplicaciones,
00:00:14o una aplicación dos veces,
00:00:16una con Next.js y otra con Tan Stack Start,
00:00:19y puedes verla si quieres,
00:00:21pero aquí te daré mi resumen corto de lo que es diferente,
00:00:24lo que es mejor y cuál deberías usar.
00:00:27Por supuesto,
00:00:28solo mi opinión,
00:00:29obviamente no es una comparación objetiva,
00:00:32pero compartiré mi experiencia con ambos y lo que pienso de Next.js y Tan Stack Start.
00:00:37Ahora se me ocurrieron un par de dimensiones que quiero usar para comparar ambos,
00:00:42y podrías añadir más,
00:00:44también podrías agregar más frameworks aquí.
00:00:47Quiero decir,
00:00:48podríamos incluir Remix,
00:00:49React Router ahora,
00:00:50podríamos incluir Nuxt para Vue,
00:00:52podríamos hablar de SvelteKit,
00:00:53pero no lo haré,
00:00:54este video es sobre Next.js y Tan Stack Start,
00:00:57no porque los otros sean malos,
00:00:58sino porque estos dos son frecuentemente comparados.
00:01:01Ahora,
00:01:02primero vale la pena señalar que Tan Stack Start es al final solo Tan Stack Router más algunas cosas del servidor,
00:01:09principalmente.
00:01:10Así que puedes usar Tan Stack Router de forma independiente si quieres construir una aplicación de página única que no necesite renderizado del lado del servidor y funciones del lado del servidor,
00:01:19por ejemplo.
00:01:19Puedes usar Tan Stack Router en lugar de React Router en tu aplicación React Vite,
00:01:24por ejemplo.
00:01:25Tan Stack Start entonces,
00:01:26como mencioné,
00:01:26simplemente agrega funcionalidades del servidor a Tan Stack Router,
00:01:29convirtiéndolo en un framework completo de React full-stack.
00:01:32Al igual que Next.js,
00:01:33que por supuesto también es un framework de React full-stack.
00:01:37Y eso también es importante.
00:01:38A veces recibo la pregunta de si deberías usar Next.js o React Vite con React Router y creo que esa es la comparación incorrecta.
00:01:47Si no necesitas lógica del lado del servidor,
00:01:49si no necesitas renderizado del lado del servidor,
00:01:52entonces simplemente deberías usar React Vite,
00:01:55es decir,
00:01:55un proyecto Vite con React,
00:01:57y agregar React Router o Tan Stack Router.
00:02:00No hay necesidad de seguir el camino de Next.js en ese caso.
00:02:02En fin, comencemos con esa comparación.
00:02:05Y la primera dimensión que elegí es la preparación para IA de ambos,
00:02:09porque por supuesto eso importa hoy en día.
00:02:12Es muy probable que estés usando IA para generar algo de código,
00:02:16tal vez todo el código que quieres en tu proyecto de Next.js o Tan Stack Start,
00:02:21y por lo tanto la IA por supuesto necesita saber cómo escribir ese código.
00:02:25Obviamente,
00:02:26puedes y debes proporcionar el contexto apropiado copiando páginas de documentación o usando un MCP como Context 7 para que la IA acceda a los docs,
00:02:36o diciéndole a la IA que haga alguna búsqueda web,
00:02:40o agregando habilidades de agente que le enseñen a la IA cómo usar Tan Stack Start o Next.js.
00:02:47Pero de forma predeterminada,
00:02:49si simplemente le haces a ChatGPT una pregunta sobre Tan Stack Start,
00:02:53muy probablemente sabrá menos sobre ello que sobre Next.js y lo que sabe probablemente esté equivocado.
00:02:59Porque incluso ahora,
00:03:00cuando estoy grabando esto,
00:03:01Tan Stack Start todavía está en fase de candidato de lanzamiento,
00:03:04lo que significa que no habrá más cambios drásticos que rompan compatibilidad,
00:03:08pero tampoco es completamente estable.
00:03:10Durante el último año ha estado principalmente en beta y alfa,
00:03:13y ese es el conocimiento que estos chatbots de IA tienen de forma predeterminada,
00:03:18por eso tendrán conocimiento erróneo sobre Tan Stack Start de manera predeterminada.
00:03:23Así que la preparación para IA de forma predeterminada no es tan buena,
00:03:28definitivamente es mejor para Next.js.
00:03:31Ahora,
00:03:31con Next.js por supuesto también ha habido cambios a lo largo de los años,
00:03:36está la nueva directiva use cache que la IA de forma predeterminada tampoco conoce tan bien,
00:03:41pero la IA tiene un entendimiento decentemente bueno sobre el app router,
00:03:45sobre React server components y todo eso,
00:03:47así que definitivamente es mejor para Next.js que para Tan Stack Start.
00:03:51Pero nuevamente,
00:03:52como mencioné,
00:03:53debes asegurarte de darle a la IA el contexto adicional apropiado que necesita,
00:03:57de lo contrario simplemente estás usando la IA de forma incorrecta.
00:04:02¿Qué hay del ecosistema y con eso me refiero a otros recursos que puedes encontrar como tutoriales,
00:04:08videos de YouTube,
00:04:09cursos,
00:04:10tal vez también paquetes adicionales para estos frameworks?
00:04:13Y aquí,
00:04:14por supuesto,
00:04:15Next.js también se ve mucho mejor que Tan Stack Start simplemente porque es más antiguo,
00:04:20ha existido durante más tiempo,
00:04:22encontrarás más recursos sobre él porque también es más grande.
00:04:27También vale la pena señalar,
00:04:28por supuesto,
00:04:29que es más grande,
00:04:30lo que significa más uso,
00:04:32porque Next.js es parte de ese stack predeterminado que tiene la IA,
00:04:36donde básicamente te da Next.js,
00:04:38React,
00:04:38Tailwind y TypeScript para la mayoría de las aplicaciones web que solicitas.
00:04:43Tan Stack Start probablemente nunca será su elección predeterminada..
00:04:47Y por lo tanto,
00:04:48como era de esperar,
00:04:49si comparas los gráficos de descarga de ambos,
00:04:51sí,
00:04:52Tan Stack Start definitivamente tiene menos descargas como puedes ver.
00:04:56Si quitas Next.js,
00:04:57puedes ver una buena tendencia ascendente para Tan Stack Start.
00:05:01Un poco relacionado con ese punto del ecosistema está,
00:05:04por supuesto,
00:05:04la facilidad de aprendizaje,
00:05:06pero no solo eso.
00:05:07Con facilidad de aprendizaje me refiero a qué tan simple es aprender la herramienta.
00:05:11Y sé que,
00:05:12por supuesto,
00:05:12ahora en la era de la IA no estás interesado en aprenderlo,
00:05:15pero como buen desarrollador deberías entender la herramienta con la que estás trabajando.
00:05:19Puede que ya no escribas todo el código a mano,
00:05:22pero deberías entender el código que la IA genera para ti.
00:05:25Así que aprenderlo sigue siendo importante.
00:05:28Y aquí diría que para Next.js es mixto.
00:05:33Puedes darle,
00:05:33no estoy seguro si querría darle uno o dos signos más porque comenzar con Next.js con el app router,
00:05:40y por cierto,
00:05:41todo esto aquí se refiere al app router,
00:05:44es bastante sencillo.
00:05:46Tiene sentido.
00:05:47Ayer en el stream construí una pequeña aplicación para tomar notas donde podías crear,
00:05:54guardar y mostrar notas.
00:05:56Y lo haces con Next.js simplemente especificando un par de archivos page.tsx que son tus,
00:06:01lo adivinaste,
00:06:02páginas.
00:06:03Puedes tener segmentos dinámicos.
00:06:04Y aprender esa sintaxis y ese enfoque para construir tu aplicación es bastante sencillo al final.
00:06:12También creo que la documentación hace un buen trabajo guiándote a través de los conceptos principales paso a paso y ayudándote a comenzar con Next.js.
00:06:22Pero las cosas se vuelven más complejas una vez que construyes aplicaciones más complejas y una vez que profundizas en los conceptos más avanzados como el almacenamiento en caché.
00:06:30Y especialmente la parte del almacenamiento en caché puede ser súper confusa porque Next.js tomó la decisión de que con la introducción del app router querían hacer un almacenamiento en caché súper agresivo en diferentes capas,
00:06:43y entender eso y entender cómo configurar tus componentes para que funcionen bien con ese almacenamiento en caché incorporado y para darles a tus usuarios el comportamiento que quieres que tengan puede ser complicado.
00:06:55Lo diré así.
00:06:56Así que comenzar es genial.
00:06:59Aprender las características más avanzadas es difícil.
00:07:02Probablemente le daré dos signos más aquí.
00:07:05Y le daré a Tan Stack Start lo mismo,
00:07:08pero por razones muy diferentes.
00:07:09Para Tan Stack Start diría que comenzar es quizás un poco más difícil que con Next.js porque su documentación de inicio no es tan buena como la documentación de Next.js.
00:07:20Conceptos importantes faltan aquí,
00:07:23diría yo,
00:07:23como la obtención de datos o las mutaciones.
00:07:27Aunque si ya tienes conocimientos de Next.js,
00:07:29hay un documento de comparación bastante bueno que compara las características clave,
00:07:33incluyendo lo relacionado con la obtención de datos y las mutaciones.
00:07:36Pero creo que puede ser un poco más difícil porque la documentación,
00:07:40aunque debo decir que ha mejorado enormemente,
00:07:42todavía tiene un poco de esa sensación de volcado de información donde no está súper claro qué artículo necesitas y,
00:07:49bueno,
00:07:49por ejemplo,
00:07:50no hay ningún artículo sobre obtención de datos aquí y cosas así.
00:07:54Además,
00:07:54dado que Tan Stack Start está construido sobre Tan Stack Router para todo lo relacionado con el enrutamiento,
00:08:00tienes que ir a la documentación de Tan Stack Router,
00:08:03que también es bastante abrumadora cuando la miras por primera vez.
00:08:07Pero una vez que superas esa barrera inicial,
00:08:10se vuelve mucho más fácil y todo,
00:08:12en mi opinión,
00:08:12tiene mucho sentido y no es tan difícil,
00:08:15y no hay trampas ocultas como los problemas relacionados con el almacenamiento en caché que puedes tener con Next.js.
00:08:22Por eso diría que comenzar es más difícil con Tan Stack Start,
00:08:26pero una vez que estás en marcha,
00:08:27es más fácil progresar y profundizar en las características más avanzadas que con Next.js.
00:08:32Como mencioné,
00:08:33eso es solo mi opinión personal,
00:08:35por supuesto.
00:08:36Ahora,
00:08:37¿qué hay de la facilidad de uso desde la perspectiva de un desarrollador?
00:08:41¿Qué tan divertido es trabajar con él?
00:08:43Eso es totalmente subjetivo,
00:08:45por supuesto,
00:08:45pero Next.js definitivamente tiene algunos problemas aquí.
00:08:48No solo los problemas relacionados con el aprendizaje potencialmente,
00:08:51sino también otros problemas.
00:08:53Por ejemplo,
00:08:53con el almacenamiento en caché puede ocurrir que tu aplicación se comporte de manera diferente en modo de desarrollo que en modo de producción,
00:09:00lo que significa que siempre tienes que probarla en modo de producción,
00:09:03lo cual deberías hacer de todos modos,
00:09:05pero se vuelve bastante molesto si tienes que hacer esto todo el tiempo durante el desarrollo porque eso te ralentiza.
00:09:11Ese es un gran problema que tuve en el pasado.
00:09:14El servidor de desarrollo también puede volverse bastante lento.
00:09:18Al menos si estás usando la versión de webpack,
00:09:21la nueva versión predeterminada de turbo pack es mucho mejor ahí,
00:09:25pero en mi experiencia no supera la configuración basada en Vite que te ofrece Tan Stack Start.
00:09:30Así que le daré tres símbolos más aquí porque en mi experiencia trabajar con él ha sido súper fluido desde el punto de vista de la experiencia del desarrollador.
00:09:40Es rápido,
00:09:41es predecible,
00:09:42no hay comportamientos extraños en su mayor parte,
00:09:45todavía hay algunos detalles aquí y allá y aún está en fase de candidato a lanzamiento,
00:09:51pero en general prefiero la experiencia de desarrollador de Tan Stack Start sobre la de Next.js.
00:09:57Obviamente eso puede ser diferente para ti.
00:10:01Ahora,
00:10:01¿qué hay de las características concretas que ofrecen Next.js y Tan Stack Start?
00:10:06Para el enrutamiento,
00:10:07como te mostré,
00:10:08en Next.js tienes un enfoque basado en archivos,
00:10:10configuras archivos que actúan como tus rutas y ahí tienes varias convenciones de nomenclatura que debes seguir.
00:10:16La documentación hace un buen trabajo al explicarlas,
00:10:19pero también definitivamente hay características más complejas como las rutas paralelas que pueden ser complicadas de configurar.
00:10:25Tan Stack Start también tiene un enfoque basado en archivos usando Tan Stack Router internamente,
00:10:29como mencioné,
00:10:30y también tienes convenciones de nombres de archivo que seguir aquí,
00:10:33que también son igualmente fáciles de aprender.
00:10:36Una ventaja que obtienes de Tan Stack Start es que con su enrutamiento basado en archivos te brinda seguridad de tipos completa,
00:10:43lo cual puede ser bastante agradable.
00:10:45Así que ambos están basados en archivos y se reduce a tus preferencias qué patrón de nomenclatura prefieres,
00:10:52pero Tan Stack Start también tiene esa seguridad de tipos al 100% que viene con su enrutador basado en archivos,
00:10:58lo cual es bueno tener.
00:11:00Y eso también responde la siguiente pregunta: Next.js tiene muy buen soporte de TypeScript y Tan Stack Start tiene un soporte de TypeScript aún mejor en mi experiencia.
00:11:11También cuando se trata de cosas como acciones del servidor o funciones del servidor o como quieras llamarlas y la obtención de datos.
00:11:18Así que sí,
00:11:18cuando usas TypeScript,
00:11:20lo cual creo que deberías,
00:11:21Tan Stack Start es realmente un placer para trabajar.
00:11:24Ahora,
00:11:24cuando se trata de obtención de datos y mutaciones de datos,
00:11:28ambos,
00:11:28como mencioné,
00:11:29te permiten ejecutar código en el servidor,
00:11:31ambos son aplicaciones React full stack,
00:11:33pero toman enfoques diferentes.
00:11:35Next.js usa React Server Components y durante mucho tiempo fue el único framework que soportaba React Server Components.
00:11:43Eso significa que tus componentes de página por defecto solo se renderizan en el servidor.
00:11:48Nunca se vuelven a renderizar en el cliente,
00:11:50lo que significa que puedes poner tu código de obtención de datos como este,
00:11:54que accederá a una base de datos internamente,
00:11:56dentro de tus componentes y eso no se filtrará al cliente.
00:11:59Tan Stack Start tiene un enfoque diferente.
00:12:01El soporte de React Server Components también llegará pronto,
00:12:04aún no está disponible cuando estoy grabando esto,
00:12:07pero el enfoque que te estoy mostrando aquí y que he usado en todos mis proyectos también seguirá existiendo,
00:12:13y en ese enfoque tus componentes de ruta por defecto se renderizan tanto en el servidor como en el cliente,
00:12:18se prerenderizan en el servidor,
00:12:20se actualizan en el cliente y por lo tanto no puedes poner tu código del lado del servidor dentro de las funciones de componentes.
00:12:27En su lugar,
00:12:28utiliza un patrón de loader que quizás conozcas de Remix,
00:12:31por ejemplo,
00:12:31donde puedes adjuntar un loader a tus rutas que también se ejecutará tanto en el cliente como en el servidor,
00:12:38pero entonces puedes llamar funciones que están decoradas o envueltas con create server functions,
00:12:43por así decirlo,
00:12:44que es una función proporcionada por Tan Stack Start que marca una función para ser ejecutada únicamente en el lado del servidor pero invocable desde el lado del cliente.
00:12:54Eso es lo que es una server function.
00:12:56Y si tienes una función así,
00:12:58puedes llamarla de forma segura en un loader o también desde el cuerpo de la función del componente y el código permanecerá en el lado del servidor.
00:13:05Detrás de escena se enviará una petición HTTP.
00:13:07Así que Next.js se basa principalmente en RSC,
00:13:10aunque por supuesto también podrías configurar endpoints de API allí y usar useEffect con la API de Fetch.
00:13:15Tan Stack Start utiliza loaders y server functions,
00:13:18aunque también vale la pena señalar que allí también puedes configurar rutas de API y usar la API de Fetch,
00:13:24Tan Stack Query o cualquier cosa similar,
00:13:26pero el enfoque integrado principal es este enfoque de loader más server function.
00:13:31Para las mutaciones,
00:13:32Next.js utiliza server actions,
00:13:34es decir,
00:13:35acciones que están decoradas con esta directiva especial useServer.
00:13:39Una de las cosas que tiene Next.js son estas directivas useServer,
00:13:43useClient.
00:13:44A algunas personas no les gustan,
00:13:46yo tampoco soy un gran fanático,
00:13:47debo decir.
00:13:48Y si tienes un archivo decorado con useServer,
00:13:50entonces todas las funciones en él se convierten en server functions que solo se ejecutarán en el servidor.
00:13:55No en el lado del cliente,
00:13:56aunque aún puedes llamarlas desde el lado del cliente.
00:13:59Así que,
00:13:59por ejemplo,
00:14:00esta función saveNode que tengo aquí,
00:14:02que almacena un nodo en la base de datos,
00:14:05todavía puede ser llamada desde el lado del cliente usando el hook useActionState,
00:14:09por ejemplo.
00:14:10En Tan Stack Start simplemente seguimos usando este enfoque de createServer function aquí,
00:14:14porque mencioné que son funciones que tienen garantizada su ejecución en el servidor y puedes usarlas para la obtención de datos o para mutaciones de datos,
00:14:21porque nuevamente,
00:14:22el código solo se ejecutará en el servidor.
00:14:24En una función de componente que también se renderiza en el cliente,
00:14:27puedes usar el hook useServer function proporcionado por Tan Stack Start para envolver tu server function y eso esencialmente la hace invocable desde el lado del cliente y te brinda características adicionales como el manejo automático de redirecciones y demás.
00:14:39Así que eso me permite entonces llamar esa server function desde mis componentes del lado del cliente.
00:14:43Entonces,
00:14:44Next.js usa las server functions oficiales de React,
00:14:47Tan Stack Start usa sus propias server functions al final.
00:14:51La idea general, por supuesto, es la misma.
00:14:54Ahora bien, ¿qué hay del almacenamiento en caché?
00:14:56Mencioné que esa es la parte difícil.
00:14:58Es bastante agresivo y potencialmente complejo en Next.js.
00:15:04Definitivamente es una de las partes más difíciles de Next.js.
00:15:07Y yo lo cubro,
00:15:08al igual que todos los demás conceptos importantes de Next.js,
00:15:11en mi curso de Next.js,
00:15:13en caso de que quieras aprender todo sobre Next.js.
00:15:16Ese curso es un excelente recurso para llevarte desde principiante absoluto hasta usuario avanzado de Next.js.
00:15:21Pero el almacenamiento en caché es definitivamente uno de los temas más problemáticos con Next.js.
00:15:26La ventaja,
00:15:27por supuesto,
00:15:27es que debido a los valores predeterminados agresivos,
00:15:30potencialmente puedes obtener un almacenamiento en caché bastante bueno para tus usuarios.
00:15:35Pero también puedes dispararte en el pie bastante fácilmente.
00:15:38Para Tan Stack Start yo lo resumiría como buenos valores predeterminados.
00:15:43Mucho menos agresivos que Next.js y,
00:15:45lo más importante,
00:15:46consistentes en mi experiencia,
00:15:48al menos entre el modo de desarrollo y producción.
00:15:52También te proporciona almacenamiento en caché,
00:15:54de modo que cuando los usuarios navegan entre rutas,
00:15:56por ejemplo,
00:15:57los datos se almacenan en caché durante un cierto período de tiempo.
00:16:00Así que para una navegación rápida no estás enviando un montón de peticiones a tu servidor.
00:16:04Y eso,
00:16:05por supuesto,
00:16:05ayuda mucho con el rendimiento,
00:16:07pero no está almacenando en caché todo o tratando de almacenar todo en diferentes capas,
00:16:11y eso puede hacer tu vida como desarrollador más fácil.
00:16:14También significa,
00:16:15por supuesto,
00:16:16que si quieres obtener el mejor rendimiento para tus usuarios y potencialmente ahorrar tráfico,
00:16:21tienes que establecer buenos encabezados de caché tú mismo y pensar un poco más sobre cómo almacenas en caché tu aplicación de lo que quizás necesites hacer con Next.js.
00:16:30Ahí tienes que pensar en otros problemas, sin embargo.
00:16:32Ahora, ¿qué hay de la estabilidad?
00:16:35Aquí probablemente le daré dos puntos a ambos.
00:16:39Ambos son bastante estables.
00:16:40Obviamente Next.js es más maduro,
00:16:43pero en mi experiencia ha tenido bastantes errores durante los últimos años,
00:16:48especialmente el servidor de desarrollo ha tenido problemas con caídas y demás.
00:16:53Pero mejoró muchísimo y en general es una experiencia estable,
00:16:57y por supuesto hay cientos y miles de aplicaciones que lo usan y están funcionando en producción sin problemas.
00:17:03Eso es definitivamente importante de destacar.
00:17:06Obviamente tuvimos esas vulnerabilidades de seguridad de React,
00:17:09pero por un lado algunas de ellas podrían descubrirse en el futuro y también afectar a TanStack Start,
00:17:13especialmente una vez que también empiecen a soportar React Server Components,
00:17:17y por otro lado eso no es principalmente un problema de Next.js,
00:17:20por supuesto.
00:17:21TanStack Start todavía está en fase de versión candidata y definitivamente me he encontrado con mi buena cantidad de problemas con él.
00:17:28Algunas caídas extrañas,
00:17:29mensajes de error raros,
00:17:31comportamientos extraños aquí y allá,
00:17:33así que también podría darle solo un punto por eso,
00:17:36pero como está en fase de versión candidata y para eso es bastante estable,
00:17:40le daré dos aquí.
00:17:41Solo ten en cuenta que definitivamente puedes encontrarte con algunos problemas al usar TanStack Start.
00:17:47Dicho esto,
00:17:47tengo aplicaciones funcionando en producción como buildmygraphic.com,
00:17:51que puedes usar para crear infografías increíbles con ayuda de IA,
00:17:55que están desarrolladas con TanStack Start y funcionan sin problemas,
00:17:59y tampoco fue problemático construirlas.
00:18:02¿Qué hay de las baterías incluidas?
00:18:04Es decir,
00:18:04¿qué tan fácil es obtener renderizado de imágenes optimizado,
00:18:08internacionalización o cualquiera de esas cosas divertidas?
00:18:12Aquí Next.js definitivamente está haciendo un mejor trabajo.
00:18:15Tiene su componente de imagen integrado,
00:18:18tiene soporte de internacionalización integrado y TanStack Start no tiene nada de eso.
00:18:24No estoy seguro si está planeado,
00:18:26no estoy seguro si es importante para ti,
00:18:28definitivamente no es algo que necesites,
00:18:30hay otras alternativas,
00:18:32paquetes de terceros que puedes usar,
00:18:34tal vez ni siquiera quieras las cosas integradas,
00:18:36pero si eso es algo que te importa o te preocupa,
00:18:39entonces Next.js probablemente sea la mejor opción aquí.
00:18:43Y luego, ¿qué hay del despliegue?
00:18:45Ese es un tema difícil.
00:18:48Next.js está construido por Vercel,
00:18:51por supuesto,
00:18:52y si lo despliegas en Vercel es súper fácil y fluido.
00:18:56Todo está optimizado para eso.
00:18:58Históricamente ha sido un poco difícil desplegarlo en tus propios servidores,
00:19:02por ejemplo,
00:19:03pero para ser justos,
00:19:04el equipo de Next.js realmente ha hecho trabajo para facilitar eso,
00:19:08escribir mejor documentación y por lo tanto hoy en día yo diría que absolutamente puedes desplegarlo en otros servicios sin muchos problemas también.
00:19:17Así que eso es dos o tres puntos,
00:19:21tres puntos si usas Vercel y dos probablemente si usas otros proveedores,
00:19:27yo diría.
00:19:28Para TanStack Start le daré dos aquí ahora,
00:19:33pero también podría darle tres.
00:19:36La razón principal por la que doy dos es que en el momento en que estoy grabando esto,
00:19:41la documentación de alojamiento todavía es un poco complicada.
00:19:45Hay socios oficialmente soportados como Cloudflare y Netlify que tienen documentación bastante buena y donde el despliegue probablemente sea bastante fluido,
00:19:54aunque no los he usado.
00:19:56Si quieres ejecutarlo en tu propio VPS,
00:19:58por ejemplo con BUN,
00:20:00hay algunas instrucciones aquí,
00:20:02pero me resultó un poco difícil seguirlas o me encontré con algunos problemas que todos fueron resolubles,
00:20:09pero definitivamente me tomó algo de tiempo.
00:20:12Creo que una vez que haya una buena guía para desplegar TanStack Start con BUN o Node en un VPS,
00:20:17el despliegue definitivamente se volverá más fácil,
00:20:20especialmente si esa guía incluye recomendaciones sobre algunas buenas prácticas que deberías seguir o posibles obstáculos que podrías enfrentar.
00:20:29Pero como mencioné,
00:20:30definitivamente también podrías optar por tres puntos aquí dependiendo de cómo lo veas.
00:20:34Como mencioné,
00:20:35todo esto es subjetivo y solo mi experiencia,
00:20:37mis pensamientos,
00:20:38y obviamente también me interesa escuchar los tuyos.
00:20:42Si hiciste el cambio o qué piensas sobre Next.js y T3 Stack,
00:20:45si estás considerando cambiar o si no usas ninguno de ellos y en su lugar usas otra opción.

Key Takeaway

TanStack Start ofrece mejor experiencia de desarrollador y TypeScript superior, mientras que Next.js proporciona un ecosistema más maduro con mejores recursos de aprendizaje, siendo ambos opciones viables para aplicaciones React full-stack según las necesidades del proyecto.

Highlights

Next.js tiene mejor preparación para IA y ecosistema más grande, pero TanStack Start ofrece mejor experiencia de desarrollador con Vite

Next.js usa React Server Components por defecto, mientras TanStack Start utiliza loaders y server functions (aunque RSC llegarán pronto)

El almacenamiento en caché en Next.js es agresivo pero complejo; TanStack Start tiene valores predeterminados más simples y consistentes

TanStack Start ofrece seguridad de tipos completa en el enrutamiento, superando a Next.js en soporte de TypeScript

Comenzar con Next.js es más sencillo gracias a mejor documentación, pero dominar características avanzadas es más difícil

Next.js incluye más baterías (componente Image, i18n), mientras TanStack Start requiere soluciones de terceros

Ambos frameworks son estables para producción, aunque TanStack Start aún está en fase de release candidate

Timeline

Introducción y contexto de la comparación

El presentador introduce la comparación entre TanStack Start y Next.js después de realizar un live stream donde construyó la misma aplicación con ambos frameworks. Enfatiza que se trata de una comparación subjetiva basada en su experiencia personal, no objetiva. Aclara que ambos son frameworks React full-stack y que la comparación con React Vite + React Router sería incorrecta, ya que esas herramientas son para aplicaciones sin lógica del lado del servidor. Establece que TanStack Start es esencialmente TanStack Router más funcionalidades del servidor, similar a cómo Next.js combina enrutamiento con capacidades full-stack.

Preparación para IA y ecosistema

Next.js tiene una ventaja significativa en preparación para IA porque los modelos tienen más conocimiento sobre él en sus datos de entrenamiento, mientras que TanStack Start todavía está en release candidate y la IA tiene información desactualizada o incorrecta de versiones beta/alfa anteriores. Se recomienda proporcionar contexto adicional mediante documentación, MCP o búsquedas web cuando se usa IA con TanStack Start. En cuanto al ecosistema, Next.js domina con más tutoriales, videos, cursos y paquetes debido a su mayor antigüedad y adopción. Los gráficos de descarga muestran que Next.js es mucho más popular, aunque TanStack Start muestra una tendencia ascendente positiva.

Facilidad de aprendizaje

Ambos frameworks reciben dos puntos pero por razones opuestas. Next.js con App Router es fácil de comenzar con documentación excelente que explica conceptos básicos como páginas y segmentos dinámicos, pero se vuelve complejo al profundizar en temas avanzados como el almacenamiento en caché agresivo. TanStack Start tiene una curva inicial más pronunciada debido a documentación menos completa (falta información sobre data fetching y mutations en la sección de inicio) y la necesidad de consultar tanto la documentación de TanStack Start como TanStack Router. Sin embargo, una vez superada la barrera inicial, progresar con TanStack Start es más sencillo sin trampas ocultas como los problemas de caché de Next.js.

Experiencia de desarrollador

TanStack Start obtiene tres puntos frente a los dos de Next.js en experiencia de desarrollador. Next.js presenta varios problemas: comportamiento diferente entre modo desarrollo y producción debido al almacenamiento en caché, obligando a pruebas constantes en producción que ralentizan el desarrollo. El servidor de desarrollo puede volverse lento, especialmente con la versión webpack, aunque turbopack ha mejorado esto. Sin embargo, la configuración basada en Vite de TanStack Start supera en rendimiento incluso a turbopack. El presentador describe trabajar con TanStack Start como súper fluido, rápido, predecible y sin comportamientos extraños, aunque reconoce que todavía hay algunos detalles por pulir dado su estado de release candidate.

Enrutamiento y TypeScript

Ambos frameworks usan enrutamiento basado en archivos con convenciones de nomenclatura similares en complejidad de aprendizaje. Next.js tiene características avanzadas como rutas paralelas que pueden ser complicadas de configurar. La ventaja clave de TanStack Start es la seguridad de tipos completa al 100% en todo el enrutamiento basado en archivos, lo cual es particularmente valioso. En cuanto a TypeScript en general, mientras Next.js tiene muy buen soporte, TanStack Start lo supera con mejor tipado en acciones del servidor, funciones del servidor y data fetching. Para desarrolladores que usan TypeScript (que el presentador recomienda), TanStack Start es descrito como un verdadero placer para trabajar.

Data fetching y mutaciones

Next.js usa React Server Components (RSC) donde los componentes de página solo se renderizan en el servidor por defecto, permitiendo código de acceso a base de datos directamente en componentes sin filtrarse al cliente. TanStack Start (hasta que llegue soporte RSC) usa componentes que se prerenderizan en servidor y actualizan en cliente, requiriendo un patrón de loader similar a Remix. Las server functions en TanStack Start se envuelven con createServerFunction para marcarlas como solo-servidor pero invocables desde el cliente mediante peticiones HTTP. Para mutaciones, Next.js usa server actions con la directiva 'use server' (que algunos desarrolladores no prefieren), mientras TanStack Start continúa usando createServerFunction con el hook useServerFunction para invocarlas desde componentes cliente con características como manejo automático de redirecciones.

Almacenamiento en caché

El almacenamiento en caché es identificado como uno de los aspectos más difíciles y problemáticos de Next.js. Aunque los valores predeterminados agresivos pueden ofrecer buen rendimiento, es fácil cometer errores y la complejidad es considerable (cubierta en profundidad en el curso de Next.js del presentador). TanStack Start tiene valores predeterminados menos agresivos pero más consistentes entre desarrollo y producción. Proporciona almacenamiento en caché para navegación rápida sin enviar múltiples peticiones al servidor, mejorando el rendimiento sin intentar cachear todo en diferentes capas. Esto simplifica la vida del desarrollador, aunque significa que para rendimiento óptimo se deben establecer encabezados de caché manualmente y pensar más en la estrategia de caché, pero evitando los problemas específicos de Next.js.

Estabilidad

Ambos reciben dos puntos en estabilidad. Next.js es más maduro pero ha tenido bastantes bugs durante años, especialmente caídas del servidor de desarrollo, aunque ha mejorado muchísimo y miles de aplicaciones funcionan en producción sin problemas. Las vulnerabilidades de seguridad de React mencionadas no son principalmente problema de Next.js y podrían afectar a TanStack Start en el futuro, especialmente con RSC. TanStack Start en release candidate ha mostrado algunos problemas: caídas extrañas, mensajes de error raros y comportamientos inusuales ocasionales, lo que podría justificar solo un punto, pero dado su estado RC es considerablemente estable. El presentador tiene aplicaciones en producción como buildmygraphic.com (para crear infografías con IA) funcionando sin problemas con TanStack Start.

Baterías incluidas y despliegue

Next.js claramente gana en baterías incluidas con componente Image optimizado e internacionalización integrada, mientras TanStack Start carece de estas características (sin certeza si están planeadas) y requiere paquetes de terceros. Para despliegue, Next.js construido por Vercel es súper fácil y fluido en esa plataforma (tres puntos), y aunque históricamente fue difícil desplegarlo en servidores propios, el equipo ha mejorado la documentación haciendo viable el despliegue en otros servicios (dos puntos). TanStack Start recibe dos puntos (potencialmente tres) porque la documentación de hosting es complicada al momento de grabación. Tiene soporte oficial para Cloudflare y Netlify con buena documentación, pero desplegar en VPS propio con BUN o Node presenta desafíos y las instrucciones fueron difíciles de seguir, aunque todos los problemas fueron resolubles con tiempo.

Conclusión y llamado a la audiencia

El presentador reconoce que toda la comparación es subjetiva basada en su experiencia personal y pensamientos, no una evaluación objetiva definitiva. Invita a la audiencia a compartir sus propias opiniones y experiencias: si han hecho el cambio entre frameworks, qué piensan sobre Next.js y TanStack Start, si están considerando cambiar, o si usan alternativas completamente diferentes. Esta apertura al diálogo refleja que la elección entre frameworks depende de necesidades específicas del proyecto, preferencias del equipo y contexto particular de cada desarrollo. El tono final enfatiza que no hay una respuesta universal correcta, y diferentes proyectos pueden beneficiarse de diferentes herramientas según sus requisitos únicos.

Community Posts

View all posts