Tanstack Start - Un Framework de React de Full-Stack Primero del Lado del Cliente

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Únase a nosotros para una introducción rápida al framework de React de full stack primero del lado del cliente de TanStack. Basado en TanStack Router, está lleno de Seguridad de Tipos, funciones del servidor, SSR, gestión de estado de URL poderosa y un par de características sorpresa increíbles que hacen que construir aplicaciones sea fácil, rápido y divertido nuevamente!

This talk has been presented at React Summit US 2024, check out the latest edition of this React Conference.

Tanner Linsley
Tanner Linsley
30 min
19 Nov, 2024

Comments

Sign in or register to post your comment.
  • Christos kuznos
    Christos kuznos
    None
    hoping for mitigation in the future, can you share an example though?
  • Saad
    Saad
    aside from it, tanstack start still has deps issues with some libraries other than that , it is good
  • Christos kuznos
    Christos kuznos
    None
    Indeed
Video Summary and Transcription
Encuestamos a miles de desarrolladores para demostrar que una audiencia más ruidosa conduce a una mejor presentación. Ha habido un cambio en el desarrollo de aplicaciones web hacia arquitecturas primero del servidor, lo que ha mejorado las capacidades de full-stack pero a costa de la complejidad y la divergencia del enfoque centrado en el cliente. Tanstec Start es un meta-framework que tiene como objetivo proporcionar la mejor experiencia de autoría del lado del cliente con primitivas poderosas del lado del servidor. El Tansec Router admite características avanzadas de enrutamiento, gestión de estado de URL y almacenamiento JSON. Combinado con las capacidades de renderizado del lado del servidor de TanStack Start, se vuelve aún más poderoso. El TanStack Router tiene cargadores isomórficos e integra perfectamente con TanStack Query para características adicionales como sondeo y soporte sin conexión. UseSuspenseQuery permite la transmisión dinámica de datos durante SSR. TanStack Start también ofrece características del lado del servidor, rutas de API, funciones del servidor y middleware. Los planes futuros incluyen RSCs, websockets, primitivas en tiempo real y pre-renderizado estático. TanStack Start ahora está en beta y es adecuado para construir aplicaciones de React. Es de código abierto.

1. Introduction to Tanstec Start

Short description:

Encuestamos a miles de desarrolladores para demostrar que una audiencia más ruidosa conduce a una mejor presentación. Ha habido un cambio en el desarrollo de aplicaciones web hacia arquitecturas server-first, lo que ha mejorado las capacidades full-stack pero a costa de la complejidad y la divergencia del enfoque centrado en el cliente. Las herramientas que abrazan este nuevo mundo aún carecen de poder y control. Para abordar esto, construí mi propio meta-framework llamado Tanstec Start, basado en el mismo conjunto de herramientas que Solid Start. Su misión es proporcionar la mejor experiencia de autoría del lado del cliente con potentes primitivas del lado del servidor. El enfoque está en el enrutamiento, el almacenamiento en caché y la seguridad de tipos, que históricamente han sido despriorizados.

Encuestamos a miles de desarrolladores, y se demostró que cuanto más ruidosa es una audiencia, mejor es la presentación. Así que me gustaría escuchar cuán ruidosos van a ser durante mi presentación. Gracias, y eso me ayuda a mantenerme motivado.

Muy bien, aquí vamos. En los últimos años, ha habido un cambio notable en el desarrollo de aplicaciones web. Hemos pasado de una larga temporada de prosperidad para las aplicaciones renderizadas del lado del cliente a este enfoque hiperconcentrado en arquitecturas server-first. Esto sin duda ha mejorado drásticamente nuestras capacidades full-stack como desarrolladores web, pero ha tenido un costo para el ecosistema. Porque, por un lado, hay herramientas maravillosas que están empujando los límites, pero están aumentando significativamente la complejidad. Hay una mayor carga cognitiva, y ha habido una especie de divergencia del enfoque tradicional centrado en el cliente que hemos llegado a amar y usar.

Por otro lado, hay herramientas que están tratando de abrazar este nuevo mundo, enfocándose en estándares y primitivas, pero en mi opinión, aún están quedándose cortas en poder y control y seguridad y experiencia general del desarrollador. Pero lo peor de todo, me temo esta nueva obsesión que tenemos con el servidor, porque parece que estamos dejando al cliente en decadencia. Eso me da mucho miedo. Porque el cliente es muy importante. Es crítico, y es poderoso. Es una de mis partes favoritas de construir aplicaciones web. Es donde comencé. Con este gran cambio, he sentido en los últimos años que estoy perdiendo algo especial para mí, y crítico para lo que consideraría crítico para entregar lo que mis usuarios necesitan.

Así que decidí tomar un gran riesgo y construir mi propio meta-framework llamado Tanstec Start. Es un nuevo meta-framework para React, y se basa en más de diez años de experiencia que he tenido construyendo SaaS intensivo en datos, renderizado del lado del cliente, y también construyendo herramientas de código abierto que hicieron eso posible en el camino. Así que Tansec Start podría sonar familiar. Está basado en el mismo conjunto de herramientas del framework que impulsa a nuestro framework primo, Solid Start. Pero sus objetivos son muy similares, y su misión es simple. Queremos ofrecer la mejor experiencia de autoría del lado del cliente posible, y luego agregar primitivas del lado del servidor potentes y flexibles que no sacrifiquen el rendimiento o la experiencia del desarrollador. Así que diría que está enfocado sin disculpas en proporcionar el mejor enrutamiento, almacenamiento en caché, y seguridad de tipos que puedo imaginar. Tres características muy importantes que históricamente han sido despriorizadas o subinvertidas en nuestra industria, pero son cruciales si quieres ofrecer la mejor experiencia de desarrollador y usuario. Para lograr esto, comencé Start construyendo sobre Tansec Router. El enrutamiento es el corazón de cualquier framework, y también donde debería ocurrir la mayor parte de la gestión del estado del cliente. Tansec Router es perfectamente adecuado para esta tarea. Así que es 100% seguro en tipos, lleva todo a un nuevo nivel, seguridad de tipos inigualable. También tiene gestión de estado de URL incorporada, lo cual explicaré en un momento.

2. Advanced Features of Tansec Router

Short description:

El Tansec Router es completamente seguro en tipos y admite funciones avanzadas de enrutamiento. Se escala bien con tipos complejos y miles de rutas. La gestión del estado de URL es una característica clave, lo que permite un estado compartible y marcable con deshacer y rehacer integrados. El enrutador también tiene validación de parámetros de búsqueda profundamente integrada para una fiabilidad a prueba de balas. Se puede almacenar JSON en la URL.

Y tiene primitivas de obtención y almacenamiento en caché de datos profundamente integradas, no solo el router en sí, sino con algunas otras cosas que también abordaremos. Pero comencemos con la seguridad de tipos. Así que todo es completamente seguro en tipos. Y cuando digo seguro en tipos, no me refiero a que fue escrito con TypeScript. Quiero decir que está completamente inferido. Puedes escribir una aplicación Tansec Router completamente segura en tipos y nunca ver ningún TypeScript en tu código. No hay más dudas si tu enrutamiento se romperá cuando llegue a producción. No más dispararse en el pie con enlaces incorrectos o parámetros de búsqueda faltantes. Y esto se aplica a toda la API de navegación, esencialmente.

Más allá de estos conceptos básicos, hemos ido más allá para admitir cosas como navegación relativa estricta parámetros de búsqueda anidados, middleware de ruta seguro en tipos, y hay muchas otras características de enrutamiento de próxima generación que simplemente no encontrarás en otras soluciones existentes. Y nos hemos asegurado de que esta experiencia con el proveedor de servicios de lenguaje TypeScript, esa es una gran palabra, pueda escalar con los tipos más complejos. Miles de rutas usando esquemas Zod muy complejos e inferencia, podemos escalar eso a básicamente tanto como queramos sin comprometer en absoluto el rendimiento del IDE. Es un gran logro. Y necesito quitarme el sombrero ante algunos de mis mantenedores por ahí. Sabes quién eres. Chris Arobin, también. Se merece un aplauso. ¿Puedo recibir un aplauso para Chris? Es la persona más inteligente en TypeScript que conozco. Y él es lo que ha hecho posible mucho de esto. Así que, ya sea que estés construyendo diez rutas en tu aplicación o 10,000, no notarás una diferencia.

También tiene gestión del estado de URL. Lo tomamos muy en serio. Porque no solo deberías estar almacenando más de nuestro estado del cliente en la URL para que pueda ser compartible, marcable, también, por cierto, está integrado deshacer y rehacer justo en el navegador, solo para que lo sepas. Es muy genial. Pero merecemos mejores herramientas para gestionar este estado en la URL. Para hacer esto posible, el router se envía con validación de parámetros de búsqueda profundamente integrada. Esto permite que las rutas anidadas apilen esquemas de validación solo para los parámetros de búsqueda que necesitan. Y luego puedes obtener esta fiabilidad a prueba de balas que esa caja de entrada mágica en la parte superior del navegador está produciendo un estado utilizable en tu aplicación. Y sí, es JSON. Puedes almacenar JSON en la URL.

3. State Management and Server-side Rendering

Short description:

El TanStack Router proporciona potentes APIs de navegación con gestión de estado integrada para actualizar los parámetros de búsqueda. Admite actualizaciones JSON completamente validadas y seguras en tipos en una sola transacción y ofrece estabilidad referencial, optimizaciones de rendimiento y suscripciones de estado de grano fino. Esto permite aplicaciones de alto rendimiento con estado almacenado en la URL. El TanStack Router es un gran framework solo del lado del cliente, pero cuando se combina con las capacidades de renderizado del lado del servidor de TanStack Start, se vuelve aún más poderoso.

No sugiero hacerlo sin pensarlo primero. Pero puedes hacerlo. Y es increíble. Lo que también significa que necesitamos APIs de navegación más potentes que puedan manejarlo.

Así que construimos la gestión de estado directamente en la API de navegación. Este es un componente de enlace seguro en tipos que puede actualizar los parámetros de búsqueda. Aquí hay otro usando una función reductora que mantiene los parámetros de búsqueda existentes mientras actualiza algunos de los otros. También hay versiones imperativas, obviamente.

Lo que creo que es realmente asombroso, sin embargo, es que puedes actualizar todo sobre la URL con soporte JSON completamente validado y seguro en tipos en una sola transacción. Y esto mantiene tu pila de historial realmente agradable y limpia. Pero honestamente, almacenar el estado de la aplicación en la URL es mucho más difícil de lo que parece. Hay tantos casos extremos. No los ves venir. Pero no necesitas preocuparte por muchas de estas cosas porque hemos logrado resolver todo para ti.

Cosas como estabilidad referencial, actualizaciones inmutables entre renders y serialización y análisis, y toneladas de optimizaciones de rendimiento que llegan hasta los adaptadores de bajo nivel que realmente escriben en la URL. Y luego está el santo grial de las suscripciones de estado de grano fino, donde los componentes y hooks solo se volverán a renderizar cuando la parte del estado de la URL de la que dependen cambie. Solo las piezas que usas. Es increíble. Y empodera aplicaciones de muy alto rendimiento. Puedes almacenar estado en la URL que puedes actualizar tan rápido como quieras. Es increíble.

Así que eso es todo solo TanStack Router. Y en el cliente. Podría detenerme aquí, y sería un gran framework solo del lado del cliente. Y lo es. Ya hay muchos desarrolladores usando TanStack Router solo por sí mismo para aplicaciones renderizadas del lado del cliente. Pero la verdadera diversión comienza cuando traemos el servidor. Así que para ir a full stack, TanStack Start necesitaba soportar renderizado del lado del servidor extremadamente simple, lo cual no es una hazaña fácil. Pero esto esencialmente significa que necesitábamos poder elevar datos críticos para el renderizado fuera de React y dentro del router. Nos inspiramos en Remix.

4. Loader API and Integration with TanStack Query

Short description:

Aplaudamos a Remix y la API de cargador de alto rendimiento en el router. TanStack Router proporciona cargadores isomórficos que se ejecutan tanto en la renderización del lado del servidor como en la navegación del lado del cliente. Admite el almacenamiento en caché y resuelve el problema de hacer que los usuarios esperen por los cargadores. Para mejorar el almacenamiento en caché, una versión en miniatura de TanStack Query está integrada en el router, proporcionando almacenamiento en caché basado en claves y admitiendo características como stale-while-revalidate y precarga persistente. Agregar TanStack Query ofrece características adicionales como polling, consultas infinitas, soporte offline y actualizaciones optimistas. El UseSuspenseQuery se integra perfectamente con el router para la obtención de datos isomórfica.

Aplaudamos a Remix. Construimos una API de cargador de alto rendimiento, muy similar, directamente en el router, lo que permite asegurarte de que los datos estén listos, o al menos preparándose, antes de que cualquier código de React se ejecute. En TanStack Router, sin embargo, los cargadores son isomórficos. Se ejecutan tanto en el servidor durante SSR como en el cliente antes de cada navegación. Pueden preparar cachés, obtener activos e incluso devolver sus propios datos, que luego se serializan al cliente durante SSR y se rehidratan con tu aplicación.

Este patrón de cargador es fantástico, y he disfrutado usándolo a lo largo de los años a través de Remix. Pero por sí solo, creo que viene con algunos inconvenientes importantes. Uno de ellos es el más obvio. Supongamos que dejas esta página y vuelves más tarde. ¿Realmente vas a hacer que tus usuarios esperen por ese cargador de nuevo? Espero que no lo hagas. Así que para resolver este problema, nuestro router necesita comenzar a entender más sobre nuestros datos, y principalmente cómo almacenarlos en caché. En este punto, espero que estés pensando lo mismo que yo. Bueno, eso suena como un trabajo perfecto para TanStack Query. ¡Woo! No. Sería genial, y lo será. Solo espera, sin embargo. Porque normalmente, tendrías razón. Sin embargo, se sentía mal obligarte a usar TanStack Query si querías usar Start, aunque sea genial. Tampoco se sentía bien dejar a TanStack Router en el polvo en cuanto a almacenamiento en caché. Si algo más simple puede hacer el truco, ¿por qué no? Así que hice algo realmente genial. Construí una versión en miniatura de TanStack Query directamente en el router. Eso es muy genial. En realidad, es el 5% del tamaño, y es el 5% del tamaño de React Query. Tiene almacenamiento en caché incorporado que se basa en una combinación del nombre de la ruta y los parámetros de búsqueda seleccionados, al igual que una clave de consulta. Y con esta pequeña adición, el router ahora por sí solo admite patrones de stale while we validate, precarga persistente, validación granular, lo que significa que para tus usuarios, nuevamente, tendrás navegación instantánea, muy pocos spinners, si es que hay alguno, y potencialmente incluso menos ancho de banda, dependiendo de cómo lo configures.

Entonces, ¿dónde deja eso a TanStack Query? ¿Qué pasa si quieres usarlo? Bueno, hicimos más cosas geniales. Si agregas TanStack Query, obtendrás cosas como el polling, las consultas infinitas, soporte offline, actualizaciones optimistas, simplemente usando TanStack Query. Es genial. Pero lo que realmente me emociona es cómo el UseSuspenseQuery se integra mágicamente con el router. Te ofrece obtención de datos isomórfica con un solo hook.

5. UseSuspenseQuery and Dynamic Streaming

Short description:

Durante SSR, UseSuspenseQuery puede solicitar datos y suspenderse si no están listos. Una vez resueltos en el servidor, los datos y el HTML se transmitirán al cliente. Puedes lograr esto con un hook sin complicaciones. Los datos críticos se pueden obtener en la respuesta inicial usando el loader o el router sin ReactQuery. Si no deseas elevar los datos al loader, usa SuspenseQuery para una transmisión completamente dinámica sin configuración.

¿Qué significa eso? Entonces, durante SSR, UseSuspenseQuery puede solicitar datos. Y si no están listos, se suspenderá para que React pueda renderizar el resto de nuestra aplicación, enviar al cliente. Y cuando la consulta resuelva esos datos en el servidor, transmitirá esos datos y el HTML restante al cliente. Bastante simple. Puedes hacer todo eso con solo este hook sin complicaciones.

Así que eso es genial. Y puedes hacer eso en otros frameworks. Pero una vez que llega al cliente, retoma justo donde lo dejó. Y ahora ya tienes el mejor motor de sincronización de datos del lado del cliente con un solo primitivo. Es muy flexible y poderoso.

¿Y qué pasa con los datos críticos? Necesitas tus datos, y no quieres esperar a que se transmitan. Simplemente los necesitas allí ahora mismo. ¿Cómo los obtenemos en la respuesta inicial? Bueno, podemos esperar los datos de la consulta en nuestro loader. Y podemos usarlos en un UseQuery, y los datos se enviarán automáticamente al cliente. No tienes que deserializar y serializar o transferir nada por ti. Simplemente sucede automáticamente. O puedes hacer lo mismo sin ReactQuery usando solo el router, lo cual es bastante genial.

Simplemente esperas los datos, los usas directamente en tu componente. Si has usado Remix, esto probablemente te resulte bastante familiar. Si necesitas renderizar lo antes posible y transmitir datos más tarde, también puedes hacerlo. Así que simplemente puedes eliminar el await del loader, y los datos se transmitirán cuando estén listos. Y nuevamente, puedes hacer esto sin ReactQuery, solo usando el router. Quita el await, usa nuestro pequeño componente await, o en React 19, usa el hook use, y funcionará exactamente igual.

Oh, pero Tanner, ¿qué pasa si no quiero elevar mis datos al loader? Sí, algunos de nosotros todavía no queremos hacer eso. Está bien. Así que para obtener una transmisión completamente dinámica, simplemente puedes usar SuspenseQuery. No necesitas elevar nada. Eso es todo lo que necesitas. Y los datos se obtendrán lo antes posible en el servidor. Se transmitirán automáticamente al cliente cuando estén listos, y no tienes que configurar nada.

6. Server-side Features and API Routes

Short description:

Y nada ha cambiado si deseas usar la obtención de datos solo del cliente. Start es básicamente 90% Tansec router y algo de Tansec query opcional. Las características del lado del servidor de Tansec Start están construidas sobre Benchy, Nitro y Vite, otorgando algunos superpoderes geniales como la renderización del lado del servidor y las rutas API.

Y nada ha cambiado si deseas usar la obtención de datos solo del cliente. Simplemente usa query como lo has estado haciendo. Así que espero que ahora estés pensando, start se ve bastante bien. ¿Se ve bastante bien? Muy bien.

Lo loco es que solo hemos hablado de router y query. Ni siquiera he comenzado a hablar de start. Lo cual realmente habla del poder de estos primitivos. No te preocupes. La Navidad llega temprano. Finalmente hablemos de Tansec Start.

Así que ahora que hemos aprendido que start es básicamente 90% Tansec router y algo de Tansec query opcional, lo único que queda es hablar del servidor. Sé que has extrañado hablar de ello. Está aquí. No necesitas tener ningún síndrome de abstinencia, ¿de acuerdo?

Así que las características del lado del servidor de Tansec Start están construidas sobre Benchy, un kit de herramientas de framework de pila completa basado en Nitro, un kit de herramientas de servidor universalmente desplegable basado en Vite, el inevitable y asombroso empaquetador y servidor de desarrollo. Estas herramientas son increíbles por derecho propio. Pero juntas, otorgan a Tansec Start algunos superpoderes realmente geniales.

El primero es, oh, olvidé eso. El primero es la renderización del lado del servidor. Todo lo que se necesita es un pequeño archivo de entrada SSR para enrutar la solicitud al router y luego una pequeña entrada del cliente para manejar la hidratación. Con esos dos cambios, ya estás preparado para la transmisión, empaquetado y despliegue a cualquier proveedor, todo gracias a Benchy, Nitro y Vite. Eso es bastante dulce.

Así que ahora que tenemos un servidor, finalmente podemos hacer las cosas divertidas. Podemos adentrarnos en patrones realmente geniales y divertidos del lado del servidor como las rutas API. Todo el mundo dice, quiero rutas API. Por favor, dámelas. Las tenemos. Vienen con ellas de serie. Incluso puedes usar una útil utilidad de rutas API basada en archivos o puedes traer la tuya propia. Puedes usar herramientas como tRPC, Hano, Express, lo que sea. Cualquier cosa que desees usar para manejar solicitudes, puedes usar.

7. Server Functions and Middleware

Short description:

Las funciones del servidor y el middleware en Tansec Start te permiten escribir código del lado del servidor en cualquier parte de tu aplicación. Puedes definir la validación de entradas y crear middleware componible. El poderoso sistema de contexto y la serialización de contexto desbloquean nuevas posibilidades para integraciones profundas y características geniales.

Eso es realmente genial. Nuevamente, si nos detuviéramos aquí, sería bastante genial, pero no pudimos evitarlo, así que añadí funciones del servidor. Y sé que algunos del equipo central de React están aquí. Así que simplemente las llamaremos funciones RPC del servidor. Gracias, React, por robar ese término. Pero createServerFunction es el primitivo que hemos añadido para comenzar a construir funcionalidad del lado del servidor. Ahora, usando este primitivo, podemos escribir código del lado del servidor en cualquier parte que queramos en nuestra aplicación y obtener una función del servidor. Podemos llamar a esta función desde cualquier parte que queramos en toda nuestra base de código. No tiene nada que ver con el router, nada que ver con query, nada de eso. Simplemente, puedes llamarla en cualquier parte. Y es solo una función asíncrona. Incluso puedes definir la validación de entradas que funciona tanto en el servidor como, opcionalmente, en el cliente, y convenientemente hace que toda la API sea completamente segura en tipos.

Entonces, ¿qué serían las funciones del servidor y la funcionalidad del servidor sin middleware? Puedes usar la función createMiddleware para crear middleware componible para tus funciones del servidor. Puedes usarlos para autenticar usuarios o realizar registros o incluso solo compartir código común entre múltiples funciones del servidor, o incluso entre otros middlewares también. Así que una de las mejores partes de este middleware es su realmente poderoso sistema de contexto. Así que al igual que el router, puedes extender cualquier contexto de middleware con datos adicionales. Y es completamente seguro en tipos e inferido para cualquier otro middleware o función del servidor que lo consuma. Y además de eso, también decidimos incluir la serialización de contexto que puede ir del cliente al servidor y del servidor de vuelta al cliente, todo aún completamente inferido. Y esto va a desbloquear algunas cosas realmente geniales. La API de funciones del servidor y la API de middleware por sí solas, ya estamos cocinando algunas integraciones realmente profundas y cosas realmente geniales que podemos hacer con estas. Y no están listas para mostrártelas aún. Pero con suerte las tendremos listas para la versión 1.0.

8. Other Features and Future Plans

Short description:

Hasta que 10-Stack Start soporte RSCs, disfruta del control total sobre las solicitudes y respuestas web, capacidades de transmisión, WebSockets, primitivas en tiempo real y pre-renderizado estático. Los RSCs te permitirán usarlos en loaders, SSR, useQuery y en cualquier otro lugar, proporcionando un estado del servidor flexible y manejable.

Hasta entonces, tendrás que disfrutar de algunas de las otras cosas geniales que obtenemos con Start de forma gratuita, como el control total sobre las solicitudes y respuestas web. Cualquier cosa que puedas hacer con H3 y Nitro y Vinci, puedes hacerla en 10-Stack Start. También tendrás la capacidad de hacer streaming. Creo que vimos a Jack Harrington mostrar algo de streaming anteriormente con 10-Stack Start. Obtenemos WebSockets y otras primitivas en tiempo real. Pre-renderizado estático. Podemos hacer algunas cosas realmente divertidas, porque todo es Nitro y Vite y Vinci bajo el capó. Así que cualquier cosa que puedas hacer con esos, puedes hacerla con esto.

Realmente estamos comenzando. Broma de papá. Una última cosa que sé que todos se están preguntando. ¿10-Stack Start soportará RSCs? No está listo para el horario estelar todavía. No voy a darte una demostración que simplemente no le haría justicia. Pero hablaré sobre ello. Descubrimos que va a ser tan fácil como devolver elementos de React o JSX desde una función del servidor. Eso es todo. Ya te dimos la API para funciones del servidor. Todo lo que tienes que hacer es devolver cosas de React y nosotros nos encargaremos del resto por ti. ¿Es genial? Creo que es bastante genial. Lo que significa que podrás usarlos en tus loaders. Puedes usarlos durante SSR. Podrás usarlos en useQuery. O prácticamente en cualquier lugar. Podrías llamar a una función del servidor desde cualquier lugar que desees. Porque los RSCs son realmente solo flujos de texto. Y estos flujos de texto representan el estado del servidor. Y si alguna vez me has escuchado hablar sobre el estado del servidor, sabes exactamente a dónde voy con esto. No tengo tiempo para entrar en esto ahora mismo. Pero los RSCs llegarán pronto. Puedes esperar algunas características nuevas y geniales que creo que los harán aún más flexibles y manejables de lo que has visto hasta ahora.

9. Announcement and Thank You

Short description:

Después de seis meses en alfa, 10stack ahora está en beta. El orador expresa gratitud hacia las empresas y patrocinadores que se preocupan profundamente por el código abierto y el futuro de la web. También agradecen a la audiencia por su apoyo e invitan a probar la versión beta con la promesa de mejoras continuas.

Una más, una última cosa. Los últimos seis meses han sido una locura. Me dediqué a tiempo completo a 10stack hace seis meses hasta la fecha. Lo cual es realmente humilde y asombroso que haya podido hacer eso. Y ha estado en alfa desde entonces. Pero creo que finalmente es hora de anunciarlo. A partir de, como, justo antes de subir al escenario. Ahora está en beta. Así que... Gracias. Por favor, pruébalo. Tendrá algunos bordes ásperos. Pero necesitamos tu ayuda para pulirlos y llegar a la versión 1.0. Estoy realmente emocionado por el futuro. Quería agradecer a muchas personas. Pero Vercel, Clerc, AGgrid, están aquí. Convex, CenturyUI.dev, Nozzle. Estas son empresas que se preocupan profundamente por el código abierto y el futuro de la web. Y ha sido increíble trabajar con ellos para ser parte de ese futuro. Así que quiero agradecerles a ellos y a estos pequeños patrocinadores de GitHub, y a todos ustedes, por ser una gran audiencia. Gracias.

10. Server Function Route Paths and API Drift

Short description:

¿Son deterministas las rutas de funciones del servidor? No. Se están llevando a cabo discusiones sobre la capacidad de proporcionar una ruta estática a una función del servidor, haciéndola pública. Se están considerando diferentes enfoques para manejar la desviación de la API y la observabilidad en las rutas de funciones, incluyendo la recarga y recuperación en el lado cliente-servidor y el uso de encabezados para asegurar la versión correcta de la función del servidor desplegada. Las limitaciones de usar la gestión de estado en la URL incluyen el riesgo de romper la URL al actualizar valores con demasiada frecuencia, especialmente en ciertos navegadores como Safari, y el potencial de problemas de serialización.

Oh, este es interesante. Oh, mierda. ¿Son deterministas las rutas de funciones del servidor? ¿Cómo manejas la desviación de la API y la observabilidad en ellas? Eso no es una pregunta.

Bien. ¿Cuál fue la primera? ¿Son deterministas las rutas de funciones del servidor? No. Pero tenemos algunas discusiones iniciales ahora mismo sobre la capacidad de simplemente proporcionar una ruta estática a una función del servidor. Y simplemente se volverá pública. Lo cual es realmente genial. Es como un reemplazo para las rutas de API, si lo piensas. Pero todavía estamos experimentando con eso. No me lo tomes como definitivo. Eso es realmente genial.

La segunda parte de esto fue, ¿cómo manejas la desviación de la API y la observabilidad en las rutas de funciones? He visto muchas formas diferentes de manejar la desviación de la API. Quiero apoyar algunas de las más ingenuas donde es como, oh, algo salió mal, así que simplemente vamos a recargar y recuperar y hacer lo que podamos en el cliente, entre el cliente y el servidor. Pero también quiero apoyar algunas de las más sofisticadas. Funciones como Vercel tiene una que puedes enviar encabezados con solicitudes y se asegurará de que vaya determinísticamente a la versión correcta de la función del servidor que desplegaste. Así que hay muchos enfoques diferentes y queremos asegurarnos de poder apoyarlos todos. Genial.

Esta es, de lejos, la pregunta más formulada. Las dos principales son variaciones de ¿qué usaste para esta presentación? Es hermosa. Keynote. Keynote. Muy bien. Genial. Volviendo al contenido real. ¿Cuáles son las limitaciones de usar la gestión de estado en la URL? Hay un punto en el que puedes romper la URL. Tuvimos personas que saturaron la URL como 60 fotogramas por segundo, tratando de actualizar valores. Incluso añadí lógica para agrupar solicitudes en la URL, porque Safari es mucho más sensible a esto que otros. También puedes encontrarte con problemas de serialización. Tienes que almacenar cosas que sean relativamente simples de serializar en la URL.

11. URL Storage and Validation

Short description:

Si almacenas demasiado en la URL, podrías tener URLs truncadas. Ten en cuenta la truncación, que es un límite de los sistemas y navegadores, no del router. TanStackQuery y RTKQuery son diferentes, con uno no basado en Redux. La fecha de lanzamiento de TanStackStop es desconocida. La validación del tipo de estado en la URL es enchufable y admite múltiples bibliotecas de validación.

Si almacenas demasiado en la URL, podrías tener URLs truncadas. Realmente hemos llevado los límites al máximo con Nozzle, compartiendo URLs de paneles con ocho widgets. El panel tiene sus propios controles que se están sincronizando todos en la URL. La URL es así de larga. Depende de dónde envíes esa URL. Algunos servidores pueden manejarlo, otros no. Solo ten en cuenta la truncación. Eso es más un límite de los sistemas y navegadores y no del router.

Claro. Esta es un poco sarcástica. ¿Puedes leer encabezados y cookies en el servidor en start paréntesis, a diferencia de next paréntesis? Genial. ¿En qué se diferencia TanStackQuery de RTKQuery? Oh, TanStackQuery, RTKQuery, no lo sé. Uno de ellos no está basado en Redux.

No sé cómo responder mejor a esa pregunta. Solo que así es como son diferentes. Esa es una diferencia bastante grande. OK. No sé quién hizo esta pregunta. Alguien llamado Theo, ¿cuándo obtendremos TanStackShop o es TanStackStop? ¿Cuándo obtendremos TanStackStop? Stop. Necesitas retirarte pronto, amigo. Nunca dejes de parar.

12. State Validation and Business Use Cases

Short description:

La validación del tipo de estado en la URL es enchufable y admite múltiples bibliotecas de validación. TanStack Start es adecuado para construir aplicaciones React. Es un sistema flexible que admite varios validadores.

OK. Volvamos al contenido. ¿Cómo manejas la validación del tipo de estado en la URL? Validación del tipo de estado en la URL. Puedes manejarlo como quieras. Es enchufable. También estamos trabajando en un nuevo estándar de validación, por lo que muchas de las bibliotecas de validación están adoptando un nuevo estándar donde no necesitas usar un adaptador, así que puedes pasar cualquier tipo de validador que desees a una ruta, y podría ser un esquema Zod que diga, los parámetros de búsqueda necesitan verse así. O podría ser YUP, o podría ser Valobot, o Archetype, o lo que sea. E incluso admite establecer valores predeterminados y completar valores vacíos si es necesario. Hemos construido un sistema muy flexible para admitir tantos validadores como podamos.

Genial. Esta es la última pregunta de la lista, así que todos, ahora es un buen momento para hacer su pregunta a continuación. Si mi comprensión de la implementación correcta de RSC de TanStack tendrá la capacidad de renderizar solo partes de la UI en una ruta en lugar de volver a renderizar toda la página, ¿es eso correcto? Correcto. No planeo construir un router RSC-primero. Por favor, no me hagas hacer eso. Lo tendremos en cuenta. ¿Cómo manejas el secuestro del estado en la URL? Primero que nada, lo validas. Hay modos que puedes dar a tus validadores para descartar el estado incorrecto. Y en última instancia, lo manejas como cualquier otra entrada de usuario. Si lo envías al servidor, deberías validarlo en el servidor estrictamente solo para lo que necesitas y tener mucho cuidado con la inyección. Es solo otra caja de entrada en la ventana del navegador.

Eso es justo. Para el caso de uso empresarial, ¿qué empresas deberían usar TanStack Start y cuáles no? No lo sé. Si estás construyendo una aplicación React, probablemente deberías usar Start. Al menos el router. Eso es muchas empresas. Bueno, sí. Genial. Esta no es una pregunta. Es un salvavidas. Más uno.

13. TanStack Router and Naming

Short description:

TanStack Router está siendo desarrollado para soportar React Native y Solid. El nombre TanStack surgió de un apodo en broma y la necesidad de un nombre comercial que pudiera ser fácilmente reconocido y no tuviera competencia en SEO.

Genial. Volvamos al contenido. ¿Puede TanStack Router funcionar en React Native con deep linking? Estamos trabajando en ello. TanStack Router, inicialmente lo escribí para que fuera agnóstico. Gran parte del núcleo no tiene nada que ver con React. Pero decidí unirlo todo y lanzarlo primero en React para obtener un producto y probar el concepto. Tan pronto como lancemos la versión 1.0 de Start, planeo investigar una estrategia basada en adaptadores para el router. Sé que sería muy sencillo para nosotros admitir React Native, definitivamente, y Solid también. Los otros, no estoy tan seguro. Estamos trabajando en otras características en el router muy pronto que nos ayudarán a tener paridad de características con algunos de los otros routers nativos que podrías esperar si los usas.

Esta es una pregunta para mí entonces. ¿Ves un mundo donde cada parte de él, digamos la UI, sea enchufable y jugable? ¿Podrías intercambiar React, Solid, y así sucesivamente? Absolutamente. Eso es realmente emocionante. Sí. ¿Cuál es la historia detrás del nombre TanStack? Bueno, sé que todos piensan que soy solo un maníaco egocéntrico. Pero la verdadera historia es que Sean Wang, o Swix, si lo conoces por Swix, me seguía llamando TanStack en React Rally hace como 6 años. No paraba. Me estaba molestando mucho. Y dije, oye, tengo un problema, porque React Query ya no va a ser solo React y no quiero marcarme a mí mismo con todos estos diferentes nombres de frameworks. Así que necesito un nombre comercial. Y él dijo, bueno, deberías usar TanStack. Y al principio lo resentí por eso hasta que lo busqué en Google. Cero competencia de SEO. Y realmente gran reconocimiento de marca. Puedes deletrearlo a la primera. Y tiene tres iniciales, tres letras de mi nombre ahí. Lo construí. Puedo poner eso ahí si quiero. Pero así es como surgió. Simplemente me incliné hacia ello.

14. TanStack Start Confidence and Open Source

Short description:

TanStack Start es un proyecto a largo plazo. Actualmente está en beta y se puede usar en producción con algunas precauciones. TanStack.com ha estado usando TanStack Start durante los últimos nueve meses. TanStack es open source.

Nadie lo está pronunciando mal. Sí. De acuerdo. Entonces, ¿puedo tener confianza para construir sobre TanStack Start y que estará presente en unos años? Sí. Me dediqué a tiempo completo a esto porque es a largo plazo para mí. No planeo ir a ningún lado. Así que voy a estar trabajando en esto durante bastante tiempo.

Ahora está en beta, lo que creo que denota que no planeamos romper nada más. ¿Deberías usarlo en producción? Quiero decir, ya hay personas usándolo en producción. Solo fíjalo a diciembre para que no se actualice automáticamente. Y prepárate para tener que migrar a través de algunos bordes ásperos. Si no quieres hacer nada de eso, entonces solo espera a que sea 1.0. Pero hemos estado lanzando TanStack.com en TanStack Start durante los últimos nueve meses. Lo cual es bastante genial. Eso es muy impresionante.

Gracias. Última pregunta. ¿Es TanStack open source? Sí. Eso fue un sí muy rotundo. Muchas gracias por el gran Q&A, a todos, y por supuesto, Tanner, también conocido como TanStack, muchas gracias. Esto fue fantástico.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Next.js para Desarrolladores de React.js
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js para Desarrolladores de React.js
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
En esta avanzada masterclass de Next.js, profundizaremos en conceptos clave y técnicas que permiten a los desarrolladores de React.js aprovechar al máximo Next.js. Exploraremos temas avanzados y prácticas prácticas, equipándote con las habilidades necesarias para construir aplicaciones web de alto rendimiento y tomar decisiones arquitectónicas informadas.
Al final de esta masterclass, serás capaz de:1. Comprender los beneficios de los Componentes del Servidor React y su papel en la construcción de aplicaciones React interactivas, renderizadas por el servidor.2. Diferenciar entre el tiempo de ejecución de Edge y Node.js en Next.js y saber cuándo usar cada uno en función de los requisitos de tu proyecto.3. Explorar técnicas avanzadas de Renderizado del Lado del Servidor (SSR), incluyendo streaming, fetching paralelo vs. secuencial, y sincronización de datos.4. Implementar estrategias de caché para mejorar el rendimiento y reducir la carga del servidor en las aplicaciones Next.js.5. Utilizar Acciones React para manejar la mutación compleja del servidor.6. Optimizar tus aplicaciones Next.js para SEO, compartir en redes sociales, y rendimiento general para mejorar la descubrabilidad y la participación del usuario.
Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.