SPA to SSR and Everything in Between

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content
Tanner Linsley
Tanner Linsley
29 min
13 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
El impacto transformador de React, el apoyo de la comunidad y la evolución del lado del servidor destacados. Desarrollos emocionantes desde generadores de sitios estáticos como Next.js y Gatsby hasta la evolución de la renderización del lado del servidor, incluyendo React Fiber, Hooks y componentes del servidor. La presión sobre los servidores en 2020 llevó al anuncio de componentes del servidor, una idea compleja pero transformadora. Surgen nuevos desafíos al entrelazar servidor y cliente, requiriendo adaptación y organización de archivos. Evaluación del valor de los componentes del servidor de React basada en las necesidades del lado del servidor y problemas de paquetes. Las SPAs son prevalentes y valoradas, a pesar del enfoque en aplicaciones del lado del cliente. TanStack Router ofrece una gestión de estado de URL sin igual y seguridad de tipos, mejorando el desarrollo de SPA. Desarrollos emocionantes por delante con el lanzamiento de DaVinci, apoyado por patrocinadores para el compromiso a tiempo completo de TAN stack y los colaboradores principales.

1. React's Evolution and Impact

Short description:

El impacto transformador de React, el apoyo de la comunidad y la evolución del lado del servidor destacados. Beneficios de SEO, reutilización de código y facilidad de uso de React del lado del servidor enfatizados.

Lo siento, no tengo camisetas esta vez, así que traje algo mucho mejor conmigo a Ámsterdam este año. Mi esposa y mis tres hijos están en la primera fila justo aquí. Así que cuanto más nos divirtamos, más se divertirán ellos. Así que mantengámoslo divertido.

Muy bien. No es ningún secreto que React está en auge. ¿Y está React en auge? Cuando comencé a usar React en 2014, no sabía que esto era lo que iba a parecer. Y pensé con certeza que después de una década empezaríamos a ver algunos cambios en esta línea. Pero solo está subiendo. Es una locura. Definitivamente es transformador. Ha transformado nuestra industria y ha transformado otras industrias también, aunque no lo creas.

Pero algo que creo que es realmente importante es que no creo que estaría en ningún lugar donde está hoy sin esta comunidad y este ecosistema que se ha unido a su alrededor. Quiero decir que estamos aquí porque elegimos React como nuestro framework todos los días. Creo que necesitamos celebrar eso. Así que React es genial. Hace diez años comencé a usarlo. Y desde que comencé a usarlo, se ha estado moviendo al servidor desde entonces.

He estado construyendo sitios web durante más de 15 años. No siempre con React. Así que cuando comencé a aprender React y vi que podía comenzar a usar capacidades del servidor, estaba realmente emocionado por eso porque realmente trae algunos buenos beneficios a la mesa, especialmente SEO. Pasé 10 años en la industria del SEO en esta última década y así que realmente aprecio eso. Obtenemos rendimiento. Obtenemos un montón de reutilización de código, un stack unificado. Y hoy es bastante fácil usar React en el servidor. Pero eso no siempre fue el caso.

En 2013, ni siquiera teníamos APIs del servidor. Fue una breve luna de miel de unos tres meses después de que lo lanzaron, obtuvimos la primera API para el servidor, renderizar a cadena. Y comparado con otros frameworks existentes en ese momento, aunque no lo creas, renderizar a cadena fue revolucionario. No sé si alguien intentó hacer SSR y Angular 1x, pero wow.

2. React's Server-Side Evolution

Short description:

Desarrollos emocionantes desde generadores de sitios estáticos como Next.js y Gatsby hasta la evolución del renderizado del lado del servidor, incluyendo React Fiber, Hooks y componentes del servidor. 2020 trajo desafíos e innovaciones como Remix, mejorando la accesibilidad de SSR para desarrolladores de React.

locura. Así que la idea de que puedes tomar tu aplicación y simplemente convertirla en HTML es realmente asombrosa. Y eso abrió este camino emocionante para los próximos 10 años. Desde 2016-17, vimos un gran crecimiento. Obtuvimos Next.js y Gatsby. Pero no obtuvimos el Next.js que estás pensando hoy. Estos eran frameworks de generadores de sitios estáticos, porque ni siquiera habíamos llegado al servidor todavía, al menos no todos nosotros.

También obtuvimos mejoras como React Fiber, actualizaciones centrales que comenzaron a allanar el camino para un impulso aún mayor hacia el servidor. En 2018 y 2019, obtuvimos Hooks y Suspense. Estos mejoraron enormemente toda nuestra ergonomía, y allanaron el camino para cosas como la transmisión y la hidratación progresiva. Y luego finalmente, comenzamos a obtener Next.js renderizado en el servidor, lo cual fue increíble. Esto fue el comienzo de la comoditización del renderizado del lado del servidor para los desarrolladores de React. Fue una gran victoria.

En 2020, obtuvimos COVID. No, solo estoy bromeando. Obtuvimos Remix. Obtuvimos otro framework clave para hacer que SSR sea más accesible para más desarrolladores de React. Y todos sabemos que en 2020, suprimimos mucho de 2020, admitámoslo. Pero lo recuerdo como uno de los momentos más emocionantes para ser un desarrollador de React, porque parecía que las cosas se estaban volviendo tan fáciles de participar. Lo que quisieras construir con React, podías hacerlo, y el servidor definitivamente era parte de eso. Fue increíble.

3. React's Server Component Revolution

Short description:

La presión sobre los servidores en 2020 llevó al anuncio de los componentes del servidor, una idea compleja pero transformadora. Next.js introdujo soporte para los componentes del servidor de React, iniciando un cambio hacia un nuevo framework y arquitectura, planteando varias preguntas e incertidumbres entre los desarrolladores.

Pero todo el mundo estaba en internet en 2020, mucha gente. Y eso puso mucha presión sobre el servidor, el aspecto del lado del servidor de todo lo que hacíamos, incluyendo React. Y no creo que sea ninguna coincidencia que en diciembre de 2020, algo aún más grande y emocionante sucediera. Se anunciaron los componentes del servidor. Los componentes del servidor eran esta nueva y poderosa idea.

Todo el mundo estaba emocionado por lo que desbloquearían, pero ni siquiera podíamos usarlos todavía. De hecho, muchos de nosotros ni siquiera sabíamos cómo funcionaban, qué eran. Solo sabíamos que lo que nos decían era que iban a desbloquear la próxima frontera. Estaba emocionadísimo, pero solo deseaba haber podido usarlos antes. Y nos rompieron la cabeza por un tiempo, y probablemente todavía confunden a muchas personas hoy en día, porque son un concepto difícil y avanzado de entender. Espero que podamos cambiar eso juntos como ecosistema en el futuro.

Pero lo genial es que obtuvimos soporte de Next.js. Next.

4. Exploring React Server Component Functionality

Short description:

Next.js introdujo los componentes del servidor de React, lo que llevó a preguntas sobre su papel como herramienta, característica del empaquetador o nueva arquitectura. La exploración del potencial y los desafíos de estos componentes destaca sus variadas aplicaciones y beneficios, incluyendo la solución de problemas como la precompilación de JSX y la optimización de paquetes del cliente.

Next.js agregó soporte para los componentes del servidor de React, y pensé, genial. {{^}}Next.js los agregó. El futuro está aquí. Ahora se van a agregar en todas partes donde pueda empezar a usarlos. Ese futuro no era lo que esperaba, porque era un enrutador completamente nuevo. Era un framework completamente nuevo. Y fue reescrito para ser primero componente del servidor de React. Y aunque extremadamente genial, se sentía muy diferente a cualquier otra cosa que había usado antes. Y honestamente, me planteó muchas preguntas, y creo que lo hizo para muchas otras personas.

Preguntas como, ¿es esto solo una nueva herramienta? ¿O es esto una característica del empaquetador? Me dicen que es una característica del empaquetador. ¿Tiene que ser un nuevo framework? También me dicen personas muy inteligentes que esto es una arquitectura completamente nueva que va a cambiar todo. Y creo que después de cinco años, me he dado cuenta de que es todas estas cosas. Y eso no necesariamente lo hace mejor. Pero deberíamos explorar todas estas cosas. Y eso es lo que quiero hacer por un momento.

Así que podría ser todas estas cosas, o podría ser algunas de ellas. O podría no ser ninguna de ellas. Porque la realidad para muchos de nosotros hoy es que probablemente no las estamos usando a menos que estés usando el enrutador de aplicaciones de Next.js. Pero son muy ampliamente aplicables. Se pueden usar de muchas maneras diferentes. Resuelven desafíos muy reales. Resuelven desafíos como la precompilación de JSX en el servidor. Pueden hacer que nuestro paquete del cliente sea más pequeño. Y si se usan en cierto grado, pueden eliminar problemas de cascada con la obtención de componentes, lo cual hemos estado buscando... Quiero decir, incluso yo he estado buscando hacer eso con React query durante los últimos cinco años. Todo esto suena realmente genial. Y honestamente, tengo casos de uso ahora mismo en tansoc.com para los que me encantaría usar componentes del servidor de React. Todavía tengo que enviar un analizador de markdown al cliente para hidratar nuestra documentación. Debería ser solo HTML estático. Y es la cosa más ridícula de todas.

5. Desafíos de Implementar Componentes del Servidor de React

Short description:

Con cada característica, hay compensaciones. Los componentes del servidor de React introducen desafíos como la multiplicidad y la necesidad de cambios micro y macro en el código, requiriendo vigilancia y adaptación a nuevas reglas y conceptos.

No puedo esperar para usarlos solo para ese caso de uso. Y entonces pienso, ¿qué no amar, verdad? Pero con cada tecnología, con cada característica que construimos, todo lo que agregamos, siempre hay compensaciones. Y he estado tratando de explorar estas compensaciones durante los últimos cinco años. Y ¿sabes qué? Incluso antes de que existieran los componentes del servidor, el servidor era complejo. Ya estábamos lidiando con muchos desafíos y problemas difíciles con el servidor. Sabes, esto no es nada nuevo. Esto no es solo hace cinco años. Hemos estado lidiando con estas cosas durante mucho tiempo.

Pero incluso en React, no sé, tenemos algunos frameworks que lo han hecho realmente fácil para nosotros. Ellos han logrado tomar estos desafíos y contener el radio de explosión a lugares que nos hacen productivos. Entonces, ¿qué tiene que ver eso con los componentes del servidor de React? Creo que una de las primeras compensaciones que estamos haciendo con los componentes del servidor es la multiplicidad. Estamos tomando esos desafíos que hemos aprendido a manejar durante muchos años, y los estamos multiplicando por toda nuestra aplicación, potencialmente en cualquier lugar donde queramos ponerlos. Necesitamos poder tejer dentro y fuera del servidor. Realmente está multiplicando estos problemas en todas partes donde lo usamos.

Creo que cuando la gente dice que solo aumenta la complejidad, esto es un poco de lo que están hablando. Definitivamente no ayuda a mi cerebro. He usado componentes del servidor en Next.js, y lleva mucho tiempo acostumbrarse. Tienes que estar constantemente vigilante sobre dónde estás tejiendo dentro y fuera del servidor. Y si es difícil para los humanos, es difícil para las personas hacerlo, no puedo imaginar que sea difícil para la IA hacerlo tampoco. Compensación número dos que me di cuenta es que los RSCs demandan cambios micro y macro en nuestro código. Creo que hay obvios como poner used client, used server en un montón de lugares. Hay muchas reglas nuevas sobre lo que puedes usar y lo que no puedes. Y también tenemos que asegurarnos de que muchas de las herramientas que usamos sean compatibles.

6. New Frontiers in React Server Components

Short description:

Nuevos desafíos surgen al entrelazar servidor y cliente, requiriendo adaptación y organización de archivos. Apuntando al uso óptimo de los componentes del servidor de React, abordando la co-ubicación de datos y limitaciones sin un enrutador server-first. Existen compensaciones al lograr el potencial completo de los componentes del servidor, incluyendo complejidades con el soporte del empaquetador.

También hay nuevos conceptos como entrelazar el servidor y el cliente. ¿Cómo hacemos eso correctamente? ¿Cómo pasamos promesas? ¿Qué sucede cuando pasas props y callbacks al cliente? ¿Cómo funciona esa capa de serialización? Hay muchas cosas nuevas que aprender, mucho terreno nuevo que cubrir. E incluso va tan macro como la organización de archivos. Dividir nuestros archivos en versiones de servidor y cliente. Estos cambios fueron intensos, pero si lo logramos con React hooks, creo que podríamos lograrlo con esto.

Este es un pequeño saludo a mi última charla que di en Ámsterdam. Desearía haber tenido más regalos de Jurassic Park, pero no pasaron el corte. Así que si podemos, si podemos manejar una transición a través de hooks, que fue bastante grande, deberíamos poder manejar algo como esto. Pero eso me lleva a la siguiente pregunta interesante que he tenido sobre los RSCs, es este concepto que estoy llamando componentes del servidor de React canónicos. Es como la visión, el santo grial de cuál es la mejor manera en que podríamos usar los componentes del servidor de React para obtener lo máximo de ellos. Y eso es lo que muchas personas realmente inteligentes y lo que muchos frameworks y muchas herramientas están apuntando hoy.

Están apuntando a deshacerse de las cascadas de obtención de datos de componentes, ¿verdad? Es como el santo grial. Quieres poder co-ubicar tus datos con tus componentes y simplemente seguir adelante. Y los componentes del servidor pueden hacer esto. Y es realmente impresionante cómo lo hacen. Pero el objetivo es usarlo solo con React. Más o menos. Porque sin un enrutador server-first o un metaframework, solo puedes llegar hasta cierto punto con los componentes del servidor. No puedes llegar a este siguiente nivel de uso canónico de poder usarlos en su máxima capacidad. Y no estoy diciendo que necesitemos llegar allí incluso, o que necesites llegar allí. Pero cosas como necesitar obtener nuevos datos requieren volver al servidor nuevamente. Tienes que volver al servidor cada vez que necesitas invalidar tus datos del servidor. Server-first. Sí, te da este increíble patrón de obtención de componentes, sabes, donde puedes entrelazar y simplemente obtener los datos que necesitas. Y todo sucede en el servidor. Y es realmente hermoso y puro. Pero también renuncias a algunas cosas, y las cosas se vuelven un poco más difíciles de lo que podrías haber esperado. Hay compensaciones en todas partes. Y una de las últimas compensaciones, que espero sea temporal, es el soporte del empaquetador. El estado del soporte del empaquetador para los componentes del servidor ha estado en mi mente mucho.

7. React Server Components: Worth and Reality

Short description:

Vite carece de soporte para React actualmente, pero el progreso está en marcha. Evaluación del valor de los componentes del servidor de React basada en las necesidades del lado del servidor y problemas de paquetes. Perspectiva personal sobre la representación de la realidad en las redes sociales y la prevalencia de aplicaciones React del lado del cliente.

Vite es una parte clave del ecosistema de React, y aún no tiene soporte. Se están haciendo progresos, pero simplemente no está listo. Y yo espero que esto se solucione pronto. Tengo muchas esperanzas de que así será.

Lo que me lleva a la pregunta final. ¿Valen la pena? Me hacen esta pregunta todo el tiempo, todos los días, en todas partes a donde voy. ¿Valen la pena los componentes del servidor de React? Y yo diría que si necesitas renderizado del lado del servidor, y realmente estás sufriendo por problemas de cascada del servidor, o algún gran problema de paquete del cliente, los componentes del servidor son para ti. Ahora, creo que es obvio que no estoy aquí para venderte los componentes del servidor. Y si lo hice, me encanta eso para ti. ¿De acuerdo?

Pero la verdad es que, desde donde estoy parado, desde mi realidad, estoy bien. La realidad para mí es diferente. Y todo lo que veo en las redes sociales, siempre le digo a mi esposa, no creas lo que ves en las redes sociales. Eso no es la realidad. La realidad que veo es muy diferente, aunque eso es de lo que parece que todos estamos hablando. AI y componentes del servidor.

8. SPA Importance and Development Commitment

Short description:

El 85% de los desarrolladores trabajan en aplicaciones React del lado del cliente, sin embargo, SSR no está obsoleto. Las SPAs son prevalentes y valoradas, a pesar del enfoque en aplicaciones del lado del cliente. El orador expresa su amor por las SPAs y destaca su compromiso de mejorar las experiencias SPA a través del desarrollo de herramientas en TanStack.

Pero incluso con todo eso, el 85% de nosotros todavía trabajamos solo en aplicaciones React del lado del cliente. Y eso es de la última encuesta sobre el estado de React. Y eso significa que cuatro de cada cinco de nosotros estamos trabajando en aplicaciones que ni siquiera usan el servidor, a menos que sea como una llamada fetch a una API o algo así. Y eso me parece una locura. Y eso no significa que SSR sea malo. Y también significa que podrías estar trabajando en ambos tipos de aplicaciones. Una aplicación del lado del cliente y una aplicación SSR. Yo lo hago. Tengo TanStack.com y tengo todas mis aplicaciones. ¿Verdad?

Pero la cuestión es que estas aplicaciones están en todas partes. Son herramientas internas y productos B2B. Están en juegos, aplicaciones SaaS. Están en todas partes. Y muchos de nosotros trabajamos en estos proyectos todos los días. Pero simplemente no hablamos mucho de ello. Porque lo que es genial y moderno para hablar, es una aplicación React del lado del cliente. Creo que son geniales. Y quiero hablar de ellas. Las SPAs son críticas. Y están aquí para quedarse. No creo que vayan a ninguna parte. Si tú estás de acuerdo con eso, quiero escuchar un grito.

Entonces, ¿por qué estoy diciendo todo esto? Bueno, por un lado, amo las SPAs. Siempre las he amado. Siempre las amaré. Además, he construido algunas SPAs muy intensas. SPAs muy intensas en los últimos 10 años que han consumido mucho de mi tiempo y energía en tratar de hacer que esa experiencia sea increíble. Por eso construí muchas de estas herramientas, o ayudé a construir algunas de estas herramientas más nuevas, para hacer ese proceso más fácil. Y todas esas herramientas son lo que eventualmente se convirtió en TanStack. Y en TanStack, preguntas a cualquiera en el equipo de mantenedores principales, amamos el cliente y el servidor.

9. Advanced Tool for SPA Development

Short description:

Los desarrolladores son valorados por igual. Las herramientas buscan satisfacer las necesidades actuales y futuras. TanStack Router ofrece una gestión de estado de URL y seguridad de tipos sin igual, mejorando el desarrollo de SPA.

No discriminamos. Los amamos a ambos. Y realmente queremos construir herramientas que vayan a satisfacer a los desarrolladores donde se encuentran hoy. Al menos. Y mirar hacia el futuro. Lo cual también es importante.

Y creo que estamos construyendo herramientas hoy, especialmente dos herramientas de las que quiero hablar, que están satisfaciendo a los desarrolladores donde se encuentran, donde tal vez no están siendo satisfechos por otras herramientas. La primera es TanStack Router. El enrutamiento es el corazón de cualquier aplicación. Y ya sea cliente o servidor primero, la mayor parte de la gestión de estado de URL debería ocurrir en un enrutador.

Y creo que TanStack Router sería el enrutador más increíble que hayas usado. Es algo que tienes que sentir. Y estoy muy seguro de que sería un cambio de juego para ti. Especialmente si estás construyendo una SPA. Es 100% seguro en tipos. Es gestión de estado para la URL. Y tiene muchas otras cosas geniales integradas en él.

10. Enhanced Type Safety and URL Management

Short description:

Seguridad de tipos con TypeScript en TanStack Router. Gestión mejorada del estado de URL. Soporte para miles de rutas y URLs compartibles y marcables.

Esa seguridad de tipos es una gran característica. No puedo subestimar lo genial que es. Y no me refiero solo a que fue escrito con TypeScript. Está escrito para TypeScript. Es a prueba de balas. Tipos inferidos en todas partes. De hecho, mucho del código que escribes con TanStack Router ni siquiera tiene sintaxis de TypeScript. Porque está tan completamente inferido que parece JavaScript simple. Pero todo es seguro en tipos. Es increíble.

Y puedes dejar de dispararte en el pie con enlaces malos y un estado defectuoso que probablemente romperá a tus usuarios y romperá tus URLs. Y vamos más allá. No solo más allá de la seguridad de tipos, sino que hay middleware seguro en tipos. Hay validación de parámetros de búsqueda anidados. No tengo suficiente tiempo para hablar de todo. Pero podemos manejar mucho. Miles de rutas. Sin ralentización.

La gestión del estado de URL en él es increíble. Son todas URLs compartibles, marcables, lo cual es como deshacer y rehacer incorporado en tu historial, lo cual es bastante genial. Validación de parámetros de búsqueda. Lanza Zod allí. Lanza lo que quieras allí. Validamos los parámetros de búsqueda para que no tengas que pensar en ellos nunca más. Solo piensas en ellos como estado. Así que puedes hacer cosas como esta, o esta. Y puedes incluso hacer cosas locas como esta. Todo en transacciones únicas a la URL. Incluso puedes reemplazar. Así que es como usar estado para la URL.

11. Enhanced State Management and Server Integration

Short description:

Gestión de estado mejorada, herramientas de cliente de alto rendimiento. Integración perfecta para el desarrollo de SPA con capacidades de servidor a través de TanSec Start y el plugin VEET.

¿Quién no quiere eso? Es increíble. Gracias. Tiene todos los problemas que vienen con la gestión de estado. Los hemos resuelto todos. Tiene suscripciones de grano fino, que ni siquiera puedes obtener con muchas otras herramientas en el ecosistema de React. Hemos hecho grandes esfuerzos para asegurarnos de que sea muy eficiente. Y todo esto es solo del lado del cliente. Eso es lo que estoy tratando de decir.

Puedes usar esto hoy. Si estás construyendo un SPA, puedes empezar a usar esto hoy. Y nos encontraremos donde estés. Tengo un minuto para hablar sobre el servidor. El servidor es muy importante para nosotros también. Tenemos colaboradores aquí de React Query. Frederick, TK Dodo. Estos chicos se preocupan profundamente por el servidor y por React Query y cómo podemos usar React Query con cosas del lado del servidor. La pregunta siempre es, ¿qué pasa con el framework? ¿Qué va a hacer NANDstack sobre este framework? Bueno, resulta que la mayor parte del framework es solo enrutamiento. Y luego agregas alguna capacidad de SSR y algunas rutas de servidor. Y luego solo necesitas poder empaquetarlo y enviarlo.

Bueno, TanSec Start es exactamente eso. Lo emparejamos con VEET, que ahora es solo un plugin de VEET. Así que si has usado TanSec Start, ahora es solo un plugin de VEET. Muy genial. Me encanta esa animación. VEET es increíble. Obtienes capacidad de servidor y SSR. Pero es incremental. Es opcional. Realmente quiero decir que solo lo agregas al enrutador.

12. Exciting Developments and Acknowledgments

Short description:

Puramente aditivo y opcional, mejorando la ya excelente experiencia con funciones de servidor increíbles y características próximas. Desarrollos emocionantes por delante con el lanzamiento de DaVinci. Apoyado por patrocinadores para el compromiso a tiempo completo de TAN stack y los colaboradores principales.

Es puramente aditivo y opcional. Y es una mejora a una experiencia ya excelente. Obtienes muchas otras cosas de las que ahora no voy a tener tiempo de hablar. Las funciones de servidor son increíbles. Y tenemos muchas características geniales que estamos lanzando. Incluso en solo V1, va a ser increíble. Y hay mucho más por venir. Ni siquiera hemos realmente abierto las compuertas para lo que queremos hacer. Se me acaba el tiempo, pero tengo que responder la pregunta, ¿qué pasa con los componentes de servidor de React? Pronto. Al igual que React Router, al igual que muchos otros, estamos esperando algo de estabilidad upstream. Necesitamos poder usar VEET y necesitamos poder dárselo a todos, no solo a las personas que usan algo como Next.js. Queremos que sea ampliamente accesible. Los RSEs son increíbles. Solo pensamos que son flujos de texto y vamos a hacer que puedas usarlos en todas partes, en todo. Incluso en nuevos proyectos que estamos construyendo de los que puedes venir a preguntarme más tarde. Y una cosa más, hemos incorporado algunas cosas realmente geniales, así que ahora se llama el lanzamiento DaVinci, pero todavía está en beta, así que no me preguntes sobre eso. Y por último, pero no menos importante, tengo muchos patrocinadores y socios geniales que han hecho esto posible. Pude dedicarme a tiempo completo a TAN stack hace un año gracias a estas empresas que también están apoyando a muchos de nuestros colaboradores y mantenedores principales ahora también, y merecen un aplauso.

QnA

Exploring TAN Stack Router Capabilities

Short description:

La pregunta de Tanner Stan sobre soporte adicional de empaquetadores para TAN stack router, casos de uso comunes para RSCs, proyectos en curso alineados con componentes de servidor de React, desafíos con configuraciones de monorepo, y la superioridad de TAN stack router en comparación con React router.

Tanner Stan está haciendo la primera pregunta, eso es increíble. ¿Tendrá TAN stack router soporte adicional de empaquetadores como RS pack y RS build? El router probablemente lo tendrá. No puedo decir para start aún, pero tenemos la esperanza de que start también lo tenga, pero el router probablemente lo tendrá. Algún día, algún día. De acuerdo, de hecho, podría incluso ya tenerlo. Router, start, tienes que ser específico.

La siguiente pregunta es de Sergei. ¿Cuáles son algunos casos de uso comunes para RSCs? Acabo de hablar sobre ellos, así que si quieres retroceder, mira mi charla de nuevo. De acuerdo, bueno, probablemente Sergei preguntó antes. Lo siento, solo estoy tratando de ser respetuoso con todas las preguntas. Y la siguiente pregunta es de Muxy. ¿Estás trabajando actualmente en alguna biblioteca o proyecto que dependa de las capacidades de componentes de servidor de React? Ciertamente estamos tratando de integrarnos con los patrones que tienen.

Si quieres aprender sobre algunas cosas complicadas que estamos haciendo con componentes de servidor de React alrededor de React query, TAN stack query, puedes encontrar a Dominic, TK Dodo o Frederick y ellos pueden contarte todo sobre las cosas complicadas y locas que estamos haciendo. Pero sí, estamos haciendo nuestro mejor esfuerzo para apoyarlos con todas nuestras herramientas. Genial. Una pregunta de Vinny. ¿Cómo es el soporte de TAN stack router con configuraciones de monorepo? Genial. Creo que hay algunos desafíos con compartir tipos a través de monorepos realmente grandes que pueden tener múltiples piezas de front-end. Todavía estamos resolviendo parte de eso, pero el futuro es brillante. De hecho, probablemente podrías venir a hablar con Dominic una vez más, quien de alguna manera ha logrado configurar una gran experiencia de monorepo con TAN stack router y start. ¿Deberíamos simplemente subir a Dominic al escenario? Sí, sí. Únete a nosotros. Pregunta de Anónimo. ¿Qué pasa con React router v6 o 7 entonces? ¿Qué puede ofrecer más TAN stack router y deberíamos cambiar a TAN stack? Sabes, las capacidades principales son muy similares. Usan el mismo enfoque para la hidratación y SSR.

Comparing TAN Stack Router Features

Short description:

Comparación del soporte de componentes de servidor de React con TAN stack router, planes para la federación de módulos, soporte de cargadores de cliente de TAN stack router, y discusiones sobre el próximo soporte completo de Angular.

Probablemente enviarán soporte para componentes de servidor de React antes que nosotros, lo cual está totalmente bien. Pero comparando manzanas con manzanas, mantengo lo que dije. Creo que TAN stack router, solo como router, es mucho más avanzado y simplemente mejor, más agradable, más fácil de usar. Y eso es lo que recomendaría. Sería raro si pensaras que algo más es mejor que en lo que estás trabajando.

Estoy de acuerdo. Pregunta de Marcus. ¿Hay planes para soportar la federación de módulos en TAN stack start? Oh sí. Zach Jackson me habla cada semana sobre eso. Nos encantaría soportarlo. Solo estamos esperando el momento adecuado para dedicarle esfuerzo, pero está en nuestro radar. Algún día.

Y tal vez Marcus pueda simplemente construirlo. Siguiente pregunta de nuestro querido visitante Anónimo. ¿El TAN stack router soporta cargadores de cliente? Sí. Fácil. Oh, sí. Entonces no hay más preguntas llegando. Genial. Genial. Entonces supongo que tu charla fue bastante clara. Así que si no hay más preguntas de nadie aquí, voy a darte 10, 9, 8, 7, 6, 5, 4. Oh, Anónimo. ¿Está planeado dar soporte completo a Angular para TAN stack query? Me encantaría verlo pronto. Oh, me encantaría eso. Como con los adaptadores de framework, nos gusta tener un fuerte soporte para adaptadores de framework. Y tenemos algunas personas realmente inteligentes de adaptadores de Angular trabajando ahora con TAN stack query. ¿Es Arnoud? Él está aquí. Arnoud está aquí.

TAN Stack Development Insights

Short description:

Discusión sobre el tamaño del equipo, financiación y aspiraciones para el desarrollo de TAN stack. Interacción con la audiencia para potencial apoyo financiero y una explicación detallada de la composición de componentes de servidor y cliente dentro de los componentes de servidor de React.

Así que si quieres eso, ve a hablar con Arnoud y dile, vamos. Hagámoslo. Así que sí, vamos a añadirlo. Démosle un aplauso. Ahí está. Ya es experimental. Así que puedes probarlo hoy. Pero sí, queremos tener un soporte a prueba de balas. Supongo que es bastante difícil construir para tantos frameworks. Pero es bueno saberlo.

¿Qué tan grande es el equipo? Oh, el equipo es enorme. Probablemente tenemos 7 u 8 mantenedores principales, otros 15 mantenedores auxiliares, y luego un montón de colaboradores. Y la mayoría de ellos, mencionaste, como que tenías los patrocinadores del año pasado trabajando a tiempo completo. ¿Y estas personas ahora están trabajando gratis? ¿O todavía queda algo de dinero de patrocinio? Hay dinero de patrocinio que distribuimos a los mantenedores principales. Y con suerte eso solo va a crecer y mejorar pronto. Tal vez algún día podamos contratar a más que solo a mí a tiempo completo en TAN stack.

Sería bueno si hay personas tal vez en la audiencia que trabajan en una empresa millonaria que usa TAN stack que tal vez puedan, tal vez dar algo de dinero. ¿No sería algo? No estoy mendigando, pero sería agradable. Siguiente pregunta de nuestro querido visitante Anónimo nuevamente. Está haciendo muchas preguntas. Hubo una captura de pantalla donde envolvías servidor y cliente y servidor, cliente, servidor. Sí, no voy a pronunciar eso. ¿Puedes hablar un poco más sobre este enfoque? Sí, cuando usas componentes de servidor, puedes componer componentes de cliente dentro de componentes de servidor que componen otros componentes de servidor dentro de esos. Y hay un patrón para poder hacer eso, para componer los hijos de React juntos de una manera que te permita entrelazarlos. Sí, es solo parte de usar componentes de servidor de React. ¿Funciona de la misma manera con las mismas reglas que el router de la app de Next.js? Sí, eso no tiene nada que ver con Next. Eso es solo cómo los componentes de servidor de React... Quiero decir las mismas reglas. Oh, sí, mismas reglas.

Managing Breaking Changes in 10 Stack Router

Short description:

Manejo de actualizaciones en el router de 10 stack con un enfoque en la estabilidad y minimización de cambios en el núcleo. Adoptar cambios disruptivos para la relevancia de la biblioteca asegurando que sean fáciles y beneficiosos. Objetivo de realizar cambios disruptivos en 10 stack donde los usuarios puedan eliminar más código, significando mejoras.

como los componentes de servidor de React... Quiero decir, las mismas reglas. Oh, sí, mismas reglas. Sí. Bien. De acuerdo. Una pregunta más de Anónimo. Las actualizaciones entre versiones principales de React han sido dolorosas. ¿Cómo manejarás esto en el router de 10 stack? Solo vamos a intentar no cambiar las cosas tanto. Ser estables. Sí. Quiero decir, nadie es perfecto. Tendremos algunos cambios disruptivos. Pero creo que lo que intentamos hacer es no cambiar las filosofías centrales y cambiar las arquitecturas centrales y pedir a los usuarios que asuman grandes cambios. Así que, sí, creo que cada biblioteca tiene cambios disruptivos y es solo parte de que una biblioteca se mantenga relevante. Así que, no prometo que nunca tendremos cambios disruptivos, pero puedo prometer que si los tenemos, serán fáciles, elegantes y valdrán la pena. Es solo... Sí. Los cambios disruptivos usualmente en mi opinión también significan que has ganado nuevos conocimientos y las cosas están mejorando tanto que valió la pena. Es una decisión que tomaste conscientemente. Y, sí, no tomas tales decisiones a la ligera. Los cambios disruptivos que intentamos hacer en 10 stack son donde puedes eliminar más de tu código.

Vale la pena. Nos quedan diez segundos. Así que, eso será todo para nuestra sesión de preguntas y respuestas en vivo. Voy a decir gracias una vez más, Tanner. Fue genial tenerte de nuevo.

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

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.
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.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Tanstack Start - Un Framework de React de Full-Stack Primero del Lado del Cliente
React Summit US 2024React Summit US 2024
30 min
Tanstack Start - Un Framework de React de Full-Stack Primero del Lado del Cliente
Top Content
We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.

Workshops on related topic

Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Deja que la IA sea tu Documentación
JSNation 2024JSNation 2024
69 min
Deja que la IA sea tu Documentación
Workshop
Jesse Hall
Jesse Hall
Únete a nuestro masterclass dinámico para crear un portal de documentación impulsado por IA. Aprende a integrar ChatGPT de OpenAI con Next.js 14, Tailwind CSS y tecnología de vanguardia para ofrecer soluciones de código e resúmenes instantáneos. Esta sesión práctica te equipará con el conocimiento para revolucionar la forma en que los usuarios interactúan con la documentación, convirtiendo las búsquedas tediosas en descubrimientos eficientes e inteligentes.
Aspectos destacados:
- Experiencia práctica en la creación de un sitio de documentación impulsado por IA.- Comprensión de la integración de la IA en las experiencias de usuario.- Habilidades prácticas con las últimas tecnologías de desarrollo web.- Estrategias para implementar y mantener recursos de documentación inteligente.
Tabla de contenidos:- Introducción a la IA en la documentación- Configuración del entorno- Construcción de la estructura de documentación- Integración de ChatGPT para documentación interactiva
Aprende Fastify Un Plugin a la Vez
Node Congress 2021Node Congress 2021
128 min
Aprende Fastify Un Plugin a la Vez
Workshop
Matteo Collina
Matteo Collina
Fastify es un marco de trabajo HTTP para Node.js que se enfoca en brindar una buena experiencia de desarrollo sin comprometer las métricas de rendimiento. Lo que hace especial a Fastify no son sus detalles técnicos, sino su comunidad, que está abierta a contribuciones de cualquier tipo. Parte de la fórmula secreta es la arquitectura de plugins de Fastify, que permite a los desarrolladores escribir más de cien plugins.Este masterclass práctico está estructurado en una serie de ejercicios que cubren desde lo básico, como "hola mundo", hasta cómo estructurar un proyecto, realizar acceso a bases de datos y autenticación.

https://github.com/nearform/the-fastify-workshop
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
React Advanced 2022React Advanced 2022
81 min
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
Workshop
David Witt
David Witt
Sumérgete en Hydrogen, un marco de trabajo basado en React para construir tiendas en línea sin cabeza. Hydrogen está diseñado para el comercio de Shopify con todas las características que necesitas para una tienda en línea lista para producción. Proporciona un inicio rápido y un entorno de desarrollo rápido para que puedas centrarte en lo divertido: construir experiencias de comercio únicas. En este masterclass, crearemos una nueva tienda en línea y construiremos rápidamente una página de producto. Cubriremos cómo empezar, enrutamiento basado en archivos, obtener datos de la API de Storefront, los componentes integrados de Hydrogen y cómo aplicar estilos con Tailwind.Aprenderás:- Empezar con la plantilla hello-world en StackBlitz- Enrutamiento basado en archivos para crear una ruta /productos/ejemplo- Enrutamiento dinámico /productos/:handle- Consultar la API de Storefront con GraphQL- Mover la consulta dentro de la aplicación de Hydrogen- Actualizar la consulta para obtener un producto por su identificador- Mostrar título, precio, imagen y descripción.- Estilizado con Tailwind- Selector de variantes y botón de compra ahora- Bonus si hay tiempo: página de colecciones
Requisitos previos: - Un navegador basado en Chromium (StackBlitz)- Idealmente experiencia con React. Un conocimiento general de desarrollo web también es válido.
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
JSNation 2023JSNation 2023
66 min
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
Esta sesión se centrará en los bloques de construcción universales de Starbeam. Usaremos Starbeam para construir una biblioteca de datos que funcione en múltiples frameworks.Escribiremos una biblioteca que almacene en caché y actualice datos, y admita relaciones, ordenación y filtrado.En lugar de obtener datos directamente, funcionará con datos obtenidos de forma asíncrona, incluidos los datos obtenidos después de la representación inicial. Los datos obtenidos y actualizados a través de web sockets también funcionarán bien.Todas estas características serán reactivas, por supuesto.Imagina que filtras tus datos por su título y luego actualizas el título de un registro para que coincida con el filtro: cualquier resultado que dependa de los datos filtrados se actualizará para reflejar el filtro actualizado.En 90 minutos, construirás una increíble biblioteca de datos reactiva y aprenderás una nueva herramienta poderosa para construir sistemas reactivos. La mejor parte: la biblioteca funciona en cualquier framework, incluso si no piensas en (o dependes de) ningún framework al construirla.
Tabla de contenidos- Almacenar un registro obtenido en una celda- Almacenar múltiples registros en un Mapa reactivo- La iteración reactiva es una iteración normal- El filtrado reactivo es un filtrado normal- Obtener más registros y actualizar el Mapa- La ordenación reactiva es una ordenación normal (¿se está volviendo un poco repetitivo?)- Modelar la invalidación de la caché como datos- Bonus: relaciones reactivas