TanStack Start 1.0 - Un Nuevo Framework Full Stack para React y Amigos

Esa es mi nueva foto, por cierto. No me parezco en nada a como era hace un año, lo cual es algo bueno. Las cosas van bien. Así que hoy se cumplen 18 meses desde que he estado trabajando de manera sostenible a tiempo completo en código abierto en Tanstack, lo cual es bastante loco. Nunca esperé que mi trabajo a tiempo completo fuera este. Y no voy a mentir, me encanta. Es un sueño hecho realidad.

Así que espero que hayas oído hablar de Tanstack. Si no lo has hecho, es una organización de código abierto responsable de algunas de las que yo llamaría las mejores bibliotecas, especialmente para el ecosistema de React. Y recientemente hemos estado construyendo algo de lo que estamos muy emocionados. Se llama Tanstack Start, obviamente, es el nombre de la charla. Y Tanstack Start se está convirtiendo rápidamente en una gran manera de construir todo tipo de aplicaciones, ya sea que sean sitios web dinámicos impulsados por servidor, full stack, del lado del cliente, SPAs, incluso sitios estáticos, y lo que quieras lanzar con codificación de vibraciones. Es bastante versátil. Y voy a hacer mi mejor esfuerzo hoy para mostrarte cómo funciona y por qué estamos realmente emocionados al respecto.

Así que, en primer lugar, este nuevo marco, como todas nuestras otras bibliotecas, no solo está escrito con TypeScript, sino que están diseñados para ser seguros en tipos desde el principio. Y es realmente doloroso que tenga que seguir diciendo esto, pero esas dos cosas no son lo mismo. Para explicar esto, me gustaría ayudarte brevemente a entender el estado actual de escribir código seguro en tipos para la web. Incluso cuando usas tus bibliotecas populares favoritas de TypeScript, esto es común Zintax para ver en todas tus aplicaciones con anotaciones de Zintax, básicamente. Y están prácticamente en todas partes en tu código. Y desafortunadamente, esta experiencia típicamente define el aprendizaje y uso de TypeScript para la mayoría de nosotros los ingenieros de JavaScript.

No es muy divertido. Escribir y mantener todas estas anotaciones de tipo en todas partes, requiere mucho esfuerzo. Es repetitivo. Es propenso a errores porque es opcional. Es olvidable porque si decides rendirte, simplemente puedes no hacerlo y omitir eso. Y para mí, eso es un camino de ida a errores, eventualmente desarrolladores quemados, y eventualmente una tensión muy real en tus usuarios finales. Así que me gustaría mostrarte el mismo código. Este es un código que funciona. He redactado parte de él. Pero quiero mostrarte cómo puede ser diseñado para ser completamente seguro en tipos.

Así que, lo creas o no, esto también es TypeScript. Y es incluso más seguro que esa última versión que te mostré, a pesar de que no hay ningún tipo de Zintax en ninguno de los códigos. Así que en Tansec, hemos pasado mucho tiempo, años, investigando y perfeccionando nuestra capacidad para inferir los tipos de tu código de aplicación y lógica de negocio. Y el resultado es en realidad menos código del que acabamos de ver. Pero también es seguro por defecto. No requiere ningún esfuerzo, sin importar cuál sea tu nivel de habilidad. Así que, ya seas un experto o un principiante, o simplemente estés aprendiendo.

Y esto lo hace infalible. Porque la seguridad de tipos no es algo en lo que quieras tener que pensar. Así que esto, en última instancia, te permite a ti y a tu equipo e incluso a tus agentes de IA volver realmente a construir cosas, en lugar de preocuparse si va a funcionar en producción. Resulta que cuando te inclinas hacia este diseño seguro en tipos desde el principio, da dividendos, cuanto más inviertes en ello. Así que hace que todas estas cosas sean más fáciles. Construir nuevas características, corregir errores, refactorizar, pivotar todo en tu aplicación completa con seguridad de tipos completa y herramientas que están diseñadas para ello.

Tienes tanta seguridad como sea posible de que nada se va a romper. Así que la seguridad de tipos por sí sola hace de Start una elección muy convincente de marco web. Lo hace extremadamente diferente ya, desde el primer momento, de todo lo demás que hayas usado. Y es realmente difícil de explicar eso. Tienes que experimentarlo. Así que si escuchas a la gente decir, oh, 10-Sec Start y seguridad de tipos. Y te preguntas, ¿por qué estás emocionado por esto? Ve y pruébalo y experiméntalo, y podrías entender por qué.

Pero también, es exclusivamente client-first. Esto es extraño, porque hace cinco o seis años, ni siquiera habría tenido que decir esto, pero hemos estado obsesionados con el servidor, mucho, en los últimos años. Así que ahora tengo que decir, es un marco full-stack, client-first. ¿Qué significa eso realmente? Significa que se comporta como una aplicación de una sola página. No debería ser nada revolucionario, pero una aplicación de una sola página, hemos estado haciendo esto durante la última década, ¿verdad? Puedes seguir razonando sobre este modelo mental realmente simple. Es SSR en la primera solicitud, y después de eso, se convierte en un SPA.

Hemos estado refinando este modelo durante la última década. Y solo recientemente hemos estado haciendo estos grandes cambios de nuevo al servidor, lo cual es genial para algunos aspectos. Quiero decir, acabamos de escuchar a Amy hablar sobre lo increíble que es Redwood, y Next.js, y React Router, y todos están hablando sobre el servidor. He estado construyendo aplicaciones durante los últimos 10 años que han sido SPAs. Y no necesariamente quiero dejar atrás todo ese arduo trabajo que hemos hecho durante la última década. Así que la idea es que puedas mantener las bibliotecas, y los patrones, y la velocidad del ecosistema SPA existente en el que hemos estado invirtiendo durante tanto tiempo.

Pero ahora, con una gran diferencia. Tienes esta capacidad de entrelazar capacidades del lado del servidor si y cuando las necesites. Y ese si es muy importante. Tanstack Start es capaz de hacer esto, en primer lugar, porque está basado en Tanstack Router. Así que voy a promocionar Tanstack Router a lo grande aquí, porque es la mayor parte del marco en sí. Como, el 90% de Start es solo el router. Y realmente no hay otro router como este por ahí. Diría que es el primero de su tipo en la experiencia del desarrollador, la seguridad de tipos de la que acabamos de hablar, todas las APIs que trae por sí solas. Es una mejora seria para cualquier aplicación web, en cualquier meta-marco de React, o cualquier marco de JavaScript, sin duda.

La experiencia que obtienes con Tanstack Router es realmente única. Y eso funcionaría solo para una aplicación del lado del cliente, si ni siquiera estamos hablando de SSR o servidor, o cosas de full-stack. Pero Start está basado en Tanstack Router. Así que hereda todas esas cosas.

Y la gente pregunta, ¿entonces qué es Start? Start trae consigo la solución al servidor. SSR, streaming, rutas API, funciones del servidor, middleware. Y al igual que Redwood, que es un gran atributo, un ciclo de vida de solicitud-respuesta completamente transparente.

Y debido a esto, funciona en cualquier lugar donde lo despliegues. Creo que todas estas cosas son imprescindibles. No quiero subir aquí y decir, oye, construimos un marco que hace lo mismo que todos los demás hacen.

Ojalá me hubiera preparado más para esta demo. Podría ser interesante. Así que si te gusta algo que ves, podrías aplaudir, y yo diré, oh, vamos en esa dirección. Y si está en silencio, simplemente diré, OK, pasemos a la siguiente cosa.

Espera. Tengo que cambiar a modo espejo rápidamente. Pantalla completa. Yay, tiempo de demo. Muy bien. Así que voy a usar el Tanstack CLI para crear un nuevo proyecto. npm create o pnpm create at tanstack start latest va a iniciar nuestro CLI. Jack Herrington es quien ha estado construyendo este CLI, y es fantástico.

Vamos a nombrar esto React Summit. Sí, Tailwind, no, no importa ahora mismo. Vamos con CloudFlare en honor al día. Y no te preocupes, no vamos a desplegar ahora mismo. Podríamos añadir un montón de complementos si quisiéramos. No voy a hacer nada de esto. Hay un montón de ellos. Y todos estos complementos, se integrarán directamente en el sistema a medida que se construye. Algunos de ellos son demos que puedes eliminar fácilmente.

No vamos a hacer nada de eso. Incluso lo enviamos con una demo de chat. Vamos a hacer solo IA estos días. No vamos a hacer eso. Vamos a ir con lo básico. Y con suerte, pnpm no se reflejará a través de CloudFlare hoy o algo así. Yay, funcionó. Bien. Así que CD React Summit.

Muy bien. Voy a abrir mi editor rápidamente. Vamos a ponerlo en pantalla completa. Aumenta eso como loco. Y luego vamos a iniciar el servidor de desarrollo. Y localhost. ¿Qué es esto? Ahí vamos. Muy bien. Genial.

Así que tenemos este pequeño sitio de demostración divertido. Y es como, bienvenido a 10 Stack Start. Aquí hay algo de documentación. Esta página está funcionando, solo está ejecutando 10 Stack Start. Así que esta página fue SSR'd. Y creo que si apagamos JavaScript, simplemente sigue funcionando. Así que yay. Casilla de verificación SSR. Ahora podemos continuar.

Tenemos funciones del servidor. Así que esta marca de tiempo. Wow. Es hora. Mira la hora. Obtenemos esa hora del servidor. Y lo hicimos en una función del servidor. Y te lo mostraré en un minuto. Incluso puedo mostrarte solicitudes API que no tienen nada que ver con funciones del servidor. Esto es solo, ya sabes, manejadores de tipo get, put, post. Puedo mostrarte eso. E incluso tenemos algunas demostraciones de, hey, este es el modo SPA.

Así que esta página es un SPA. No hacemos nada durante SSR. Y puedes simplemente decir, ya sabes qué, para esta ruta, solo quiero renderizar en el cliente. Y podemos hacer otras cosas como hacer un SSR completo, que todo el sitio ha estado de esta manera todo el tiempo. No sé por qué tenemos ese ejemplo. Y luego está solo datos, lo cual es interesante. Todos estos datos, los datos fueron realmente obtenidos en el servidor y transmitidos. Pero renderizamos todo en el cliente. Así que puedes dividir. Muy único. Realmente no puedes hacer eso con ningún otro framework. Es muy divertido. Vamos a profundizar en el código.

Solo quiero darte como el breve, el recorrido rápido de cómo se siente usar TanStack Start. Tengo siete minutos. Genial. Bien. Así que tenemos un archivo de router. Aquí es donde creamos un router TanStack. Lo divertido es que todo lo que aprendes sobre el router TanStack, si quieres empezar a usar Start, nada de eso tiene que cambiar. No hay modos. No hay actualizaciones. No hay cambios de sintaxis. Nada. Puedes simplemente tomar tus rutas existentes y seguir usándolas de la manera que has estado usándolas, pero ahora tienes toda esta magia del lado del servidor que puedes usar. Este es uno de los únicos cambios que tienes que hacer es que tienes que poner tu router dentro de esta función get router porque creamos un nuevo router para cada solicitud.

Después de eso, todo es básicamente lo mismo. Este árbol de rutas se genera porque enviamos con enrutamiento basado en archivos.

We support all of the flavors. Aquí está nuestra carpeta de rutas. Este es nuestro componente raíz y envuelve toda nuestra aplicación. Tenemos head y meta. Tenemos algunas etiquetas de enlace que estamos poniendo allí. Aquí está nuestro documento raíz. En realidad controlamos todo el diseño con HTML body header. Incluso tenemos herramientas de desarrollo de TanStack allí. Eso es bastante divertido. Estamos renderizando todos nuestros scripts y luego estamos pasando nuestros hijos y ahí es donde vamos a renderizar el resto de nuestra aplicación.

Aquí está nuestra página de índice. Lo divertido es que si fuéramos a crear una nueva ruta dentro de aquí, solo una pequeña ruta divertida, vamos a hacer test.tsx, lo llenamos por ti para que no tengas que preocuparte por el código repetitivo. Algunas personas dicen, ¿qué es esto? No te preocupes. Así es como lo hacemos todo seguro por tipo. Solo exportas una única ruta. Aquí hay un componente. Aquí podemos agregar un cargador y esto devolverá este mensaje. Esto es algo fundamental que quiero enseñar.

Lo único que necesitas desaprender y aprender con TanStack Start es que todo es isomórfico por defecto. Isomórfico es una palabra elegante. ¿Qué significa eso? Significa que todo el código que escribes y ves por defecto se ejecutará durante SSR en el servidor y en el cliente durante futuras navegaciones. Si alguna vez has usado Remix, podrías estar pensando, esto podría ejecutarse en el servidor. No lo hace. Esto se ejecuta en el cliente y en el servidor. La pregunta es, ¿cómo hago para que se ejecute solo en el servidor? Podemos crear una función de servidor. Cualquiera de la lógica que pongamos dentro de aquí ahora solo se ejecutará en el servidor. También podemos ejecutar esta función desde el cliente, pero es un RPC. Vuelve al servidor para asegurarse de que solo lo ejecutamos allí. Así es como creamos un marco isomórfico primero. Hay muchas otras utilidades que te permiten aislar tu código solo al servidor o solo al cliente.

Es muy genial. Terminemos con esta página. Volvamos aquí a algunas de estas demos. Aquí está esa ruta de solicitud de API que estábamos viendo. Ni siquiera te voy a mostrar esa. Esa no es genial.

Aquí está la ruta solo de datos. Esto es divertido. Si viste esa lista de canciones punk allí, todo lo que hicimos fue decir SSR data only. Lo que hace es que obtenemos estos datos en el servidor y los transmitimos, pero el componente no se renderiza hasta que llegamos al cliente. Estamos usando el servidor y SSR para hacer algunas cosas divertidas con la transmisión de datos.

Ya estamos en el servidor haciendo SSR. Consigamos los datos mientras estamos allí, transmitámoslos. Tal vez tengas un montón de cosas en esta página que piensas, ¿sabes qué? No necesitamos hacer SSR del contenido real. Solo lo renderizaremos en el cliente. Ese es un patrón bastante divertido. Este SSR completo es solo el predeterminado. No hay nada aquí que sea especial. O hay modo SPA donde simplemente dices SSR false. Nada de esto va a ejecutarse o renderizarse en el servidor en absoluto.

Podemos simplemente tomar toda esta demo y eliminarla, creo. Estamos volviendo a las cosas normales. Lo que es genial aquí es si tomamos una nueva ruta, y llamémosla about.tsx. Oh genial, ahora tenemos una página about. Volveremos a nuestro índice. En la página de inicio aquí, solo voy a ir al final y escribir un enlace. Es una etiqueta de enlace, una etiqueta a, a la que queremos ir a una página específica. Aquí es donde entra esa seguridad de tipos si pudiera importar mi componente de enlace. Especificamos un enlace. No tenemos un to. Solo estamos quejándonos. Es como, oye, necesita ser un enlace a uno de estos lugares.

Si vamos a autocompletar, veremos que tenemos about. Los enlaces son todos seguridad de tipos. Esa seguridad de tipos te sigue a todas partes. Si fuéramos a about y realmente agregáramos una búsqueda, validar búsqueda, objeto. Digamos que esta página requiere un nombre. Hagamos el mundo por defecto. Creo que Zod ya está aquí. Espero que sí. No, no está. Solo vamos a hacer esto. Solo será una función con búsqueda y eso debería funcionar bien. Nombre, buscar nombre, mundo como string. Obviamente, querríamos usar un validador aquí, pero no tengo Zod instalado.

Inferirá estos tipos. ¿Sabes qué? Rompamos las reglas. Sé que hablé de que, si nos ponemos perezosos, podemos simplemente desactivarlo. Hagamos esto. D como string.

No, hagámoslo mejor. Name string. Genial. Solo pretendamos que realmente usamos Zod para validar estos datos.

Luego, aquí abajo, si queremos usar la búsqueda, podemos tomar name y será un string. De hecho, puedes tomar esto de cualquier otra ruta también.

Luego, si volvemos a nuestra página de índice, notarás que ahora tenemos un error porque declaramos un parámetro de búsqueda requerido en esa página. Este enlace ahora se está quejando y dice, oye, te faltan params. Bien, agreguemos params.

No sé qué es todavía. Solo pretendamos que soy un desarrollador junior y no tengo idea de lo que estoy haciendo. Bien, todavía dice que search está declarado aquí. No son params, es search. Lo siento. Search se está quejando ahora.

El tipo esperado proviene de search porque no es asignable a name dot string. Realmente tenemos que pasar un name y finalmente deja de quejarse. Podemos hacer esto tan estricto como queramos.

Este es exactamente el tipo de experiencia que tuve que construir en Nozzle, esta enorme aplicación SaaS porque teníamos paneles y enlaces por todas partes, guardando todo ese estado en el URL, lo cual deberías estar haciendo. Puedes imaginar por qué todo esto se vuelve extremadamente valioso. Tengo 38 segundos y mucho más para mostrar, así que solo tengo que dejar de hacer demostraciones.

Bien, cerremos esto. Voy a volver a mi keynote muy rápido. Bien, mucho más para demostrar. Hay tantos videos. Solo ven a hablar conmigo y te mostraré tantas demostraciones como quieras. Simplemente no hay suficiente tiempo en el día para mostrarte todo, pero tengo algunos últimos pensamientos finales. Voy a entrar un poco en mi Q&A.

Desde mi perspectiva personal, siento que en los últimos años nuestros meta-frameworks han estado pidiéndonos mucho. Nos han estado pidiendo cambios en nuestros modelos mentales.

Nos han estado pidiendo que refactoricemos a veces nuestro código, a veces la forma en que funcionan nuestros cerebros. {{^}}Nos han estado dando cambios disruptivos y como que bailando alrededor de soluciones. Los RSCs han lanzado todo por la borda. Moverse al servidor es muy tumultuoso. Todo este movimiento siento que nos ha dado muy poco beneficio a cambio, pragmáticamente. Como alguien que solo necesita construir una aplicación, entregar algo a mis usuarios, no veo mucho beneficio.

Así que para mí, a veces ha sido incluso más difícil hacer lo que solía considerar simple y fácil hace apenas cuatro o cinco años. Es por eso que creo que React merece un nuevo meta-framework, y los estamos obteniendo. Acabamos de escuchar sobre uno antes, y creo que merecemos uno como TanSec Start. Creo que Start es un proyecto práctico, estable, muy basado en la comunidad, y en última instancia no está a merced de la hoja de ruta de una empresa de productos o de un resultado final.

Este es un proyecto que ya tiene toneladas de ingenieros talentosos, socios y usuarios que lo están implementando en producción y que creen que Start es crítico para el futuro de React. Hemos pasado un total de cinco años desarrollando la tecnología que se incorporó en TanSec Start. Creo que realmente mejorará la calidad y la velocidad con la que podemos construir para la web de una manera muy significativa. Estoy aquí para ganar esa afirmación. Estamos aquí para ganarla, y la única manera de hacerlo es que vayas y le des una oportunidad y nos hagas saber lo que piensas. Eso es todo.

Haz tus preguntas en Slido, y podemos comenzar con la primera. ¿Puedes hacer SSG o generación de sitios estáticos con Start? Sí. Sí. Sí puedes. Sí. Sí. Genial. ¿Cómo integraríamos la lógica de seguridad de tipos en un mono repo? No voy a mentir, el tema de los mono repos es difícil. Tenemos personas que están construyendo proyectos de mono repos que son realmente grandes, y en su mayoría, no es un gran problema a menos que estés dividiendo tu front end, como tus rutas, en múltiples paquetes. Si estás haciendo eso, no solo vas a tener dificultades para hacerlo con la mayoría de los routers de todos modos, sino especialmente con la seguridad de tipos, la forma en que funciona la seguridad de tipos, hay algunos trucos y hacks en los que estamos trabajando para hacer eso más fácil, porque la forma en que los tipos funcionan es que son como omnipresentes en todo tu proyecto. Los paquetes, si tienen configuraciones TS separadas, es difícil aislar los tipos de router a paquetes específicos. Estamos trabajando en ello, y realmente no es un gran problema. De hecho, la persona que lo ha estado experimentando más es Dominik Dorfmeister, TK Dodo, quien trabaja en Sentry. Ha estado usando mucho TanStack Router, y tiene ideas de mono repos para mejorar eso. Genial. Escuché que Sentry es un gran lugar para trabajar. Sí, he oído eso.

¿Cómo lo sabría? Bien, ¿cómo agrega automáticamente TanStack Start código boilerplate cuando creas un nuevo archivo? TanStack Start es solo un plugin de Vite. No mostré esa parte, pero puedes simplemente agregar TanStack Start, el plugin de Vite, a una configuración de Vite, y eso es todo. Al final del día, es realmente solo un manejador de solicitudes, y usamos Vite para preparar ese manejador de solicitudes. Como ya estamos conectados a Vite, podemos realmente conectarnos al ciclo de vida de desarrollo, escuchar en el sistema de archivos, y podemos observar los archivos que estás creando. Cuando encontramos una nueva ruta que llega en blanco, simplemente tomamos algunas decisiones informadas por ti y escribimos el contenido, y lo escribimos en el disco. También es muy eficiente. Podemos observar cientos, tal vez miles de archivos de rutas y mantenerlos actualizados. De hecho, si viste la ruta dentro del comando de crear archivo de ruta, en realidad no necesitas ni siquiera gestionar eso. Si cambias el nombre de tu ruta o la mueves a un camino diferente, simplemente actualizamos ese camino por ti en el código. Lo cual puede ser un poco sorprendente para algunas personas al principio. Están como, ¿qué demonios? ¿Por qué esa cadena acaba de actualizarse en mi archivo? Y nosotros decimos, oh, te tenemos cubierto. Estamos haciendo cola por ti. Súper útil.

¿Cómo... Oh, ese es otro Mono repo. Veamos. Victoria oficial 1.0. Lo antes posible. Lo antes posible, sí. ¿Qué significa lo antes posible? Simplemente significa tan pronto como sea posible. Me encanta eso. Sí. Es algo nuevo. ¿Cómo juega trpc con el modo de solo datos de SSR? Y una vez obtenido, ¿puedes pasar datos a client.js para hidratar el estado? trpc juega genial. De hecho, todas estas otras APIs, voy a responder a la pregunta de Dax de Twitter, de hecho, de nuevo, y él va a sacudir la cabeza hacia mí.

Pero puedes tomar cualquiera de estos frameworks de back-end como Nest o Hano o lo que quieras, trpc, y puedes hacer dos cosas. Puedes conectarlos a 10Stack Start solo como un manejador. Debería haberte mostrado eso. Puedes simplemente hacer un manejador catch-all dentro de 10Stack Start en un endpoint y simplemente pasarlo a Hano. O podrías hacer lo contrario, y podrías dirigir todo con Hano, y luego cuando llegues a alguna ruta que quieras usar 10Stack Start, simplemente pasas la solicitud al manejador de 10Stack Start. Así que juega bien con trpc, círculo completo. Una vez obtenido, ¿puedes pasar los datos a client.js para hidratar el estado? Sí, absolutamente.

Todo eso se maneja por ti. Genial. ¿Qué tan difícil es migrar una aplicación existente? Depende de dónde vengas. Si vienes de Remix o React Router, es increíblemente simple. Si vienes de Next Pages Router, es bastante simple. Si vienes de Next App Router, tienes que desaprender algunas cosas y hacer un poco de migración. Así que estarías desenredando todas estas cosas de anidación de componentes del servidor que tenías que hacer para obtener datos, y luego simplemente ponerlos en cargadores. Pero aparte de eso, conceptualmente y en la práctica, es bastante simple. Tenemos guías de migración en el sitio que son bastante directas. E incluso he oído de algunas personas que toman esas guías de migración y casi hacen migraciones de un solo golpe a través de cursor y código en la nube. Así que vale la pena intentarlo. Genial.

¿Cómo funciona 10Stack Start en grandes bases de código con miles de componentes React? Funciona genial. Y de hecho, probablemente funcionará mejor que la mayoría de los otros enrutadores porque usamos suscripciones detalladas. Para cada biblioteca de 10Stack, usamos cosas detalladas. Pero especialmente para el enrutador, cuando te suscribes a parámetros de búsqueda o vuelves a renderizar cosas o navegas, en realidad no estamos volviendo a renderizar todo el árbol de componentes. Solo estamos volviendo a renderizar lo que necesita cambiar. Así que en realidad es realmente rápido. Y no son solo miles de componentes React, sino que hemos probado 10Stack Start y Router hasta decenas de miles de rutas. E incluso lo probamos contra la seguridad de tipos también. ¿Puede la seguridad de tipos seguir funcionando con 10,000 rutas allí? Y la respuesta es sí. De hecho, todavía se comporta como si solo tuvieras un archivo abierto. Así que felicitaciones a Chris Hrobin. Si alguien sabe quién es Chris Hrobin, es un mago del rendimiento de TypeScript. Sí. Es un conjunto de habilidades impresionante. Lo es. Sí. Veamos. Entonces, ¿es el modo de solo datos como SPA, pero con datos pre-cargados? ¿Cómo se vería la página con JS desactivado? No, el modo de solo datos requiere un servidor.

Requiere un SSR. La única diferencia es, imagina SSR y estás haciendo todo el mismo trabajo, pero simplemente no estás renderizando el componente en el servidor. Solo estás esperando para hacer eso en el cliente. Así que esa pregunta no tiene mucho sentido, pero está bien. Sí.

Y otra que podría no, ¿está integrado con Next.js por defecto? Oh sí. Sí. No creo, creo que esta persona se perdió el- Para ser claro, ¿verdad? Es muy separado, ¿verdad? No, lo siento. Estaba siendo sarcástico. Sí. Sí. Eso no tiene sentido.

Sí. ¿En qué se diferencia TanStackRouter de ReactRouter? TanStackRouter está construido desde cero para la seguridad de tipos. ReactRouter tiene ahora una seguridad de tipos decente, pero mucho de ello fue un poco añadido retroactivamente y se puede ver eso en el diseño de los tipos.