Por qué Redwood Adoptó los Componentes del Servidor React

Me toca el público después del almuerzo. Y eso es porque voy a hacer que seas interactivo. Vamos a pasar un buen rato. Vamos a aprender sobre Redwood.

Hablemos del elefante en la habitación. Algunos de ustedes no saben qué es Redwood, así que vamos a abordar eso. También vamos a hablar mucho sobre RSCs. Estoy en el equipo de liderazgo de Redwood. Mencioné un par de cosas que hago. Y la parte más importante del tema que une otras cosas es que amo, y los equipos con los que trabajo, nos encanta ayudar a las personas a tener éxito. Nos encanta ayudar a otros a tener éxito, para que eso pueda hacer que el Proyecto Redwood tenga éxito. Y eso es mucho de lo que estamos haciendo. Y React Server Components definitivamente está haciendo eso por Redwood. Y también esperamos que podamos avanzar algunas cosas con React Server Components. Pero primero, vamos a cortar por lo sano aquí. ¿Estamos obteniendo el... Ahí vamos. Voy a ir al grano. En realidad, voy a decirte el punto antes de hacer ninguna presentación, porque quién sabe qué va a pasar realmente después? Todo lo que necesitas recordar es que Redwood está totalmente comprometido con React. Así que todo lo que estoy a punto de hablar, el resumen al final es que estamos totalmente comprometidos con React, y hay mucho por venir. Estamos realmente emocionados con lo que está sucediendo con React, y eso es donde Red... Debido a donde React está yendo, eso es a donde va Redwood.

Muy bien. Aquí vamos. Parte interactiva. Muy bien. Tu viaje con React. Así que esto requerirá un poco de participación del público. Es cierto que en realidad no puedo ver a ninguno de ustedes en este momento debido a la luz brillante, así que no sabré si están participando, pero podré escuchar, y será divertido, vamos a pasar un buen rato. Así que si puedes recordar hace mucho tiempo, quiero que reflexiones sobre ese momento en tu viaje con React muy al principio donde podrías haber sentido esa posibilidad creativa. ¿Verdad? JavaScript ecosistema, nos encantan este tipo de cosas, nos emocionamos mucho con las cosas brillantes. ¿Por qué? Porque nos emociona lo que es posible. Así que piensa mucho atrás.

Muy bien. Todos de pie. Sé que tienen portátiles. Puedo ver el portátil. Levántate, eso está bien. Sí, estas personas en el frente, me gustan estos chicos. Ese es Tom, por cierto. Muy bien. Levántate, eso está bien. Voy a ir al lado para poder dirigir un poco.

Esto es lo que vas a hacer. Muy bien. Si eras un 1, 1 va a significar, espera, ¿la gente puede ser creativa, verdad? 1 es el más bajo en la escala. Podría ser mejor. Podría ser peor. Esa es la escala media. 3 es esa sensación de posibilidad ilimitada. Quizás no tan alto, pero, ya sabes, en algún lugar de allí. Así que piensa en cuando descubriste React, interfaces de usuario interactivas en el cliente. Ahora, adelante y siéntate. Si estabas calificando a ti mismo, tu relación con la creatividad y la posibilidad ilimitada en el Si eras un 1 cuando te encontraste con React por primera vez, adelante y siéntate. ¿Significa que la gente puede ser creativa? Vale. Muy bien. Gente honesta. No estoy señalando a nadie, pero vi eso, gracias. Si eras un 2, cuando empezaste tu viaje con React, siéntate. Vale. Bien. Si eras un 3, estás de pie. Genial. Alguien, una persona que es un 3. ¿Qué era algo que te emocionaba mucho hacer? Una sensación de posibilidad ilimitada, grítalo. Algo que te emocionaba hacer con React la primera vez. Nadie. Escribir un reconciliador y para cosas diferentes, como React 3 fiber y como, KC fiber, esas tecnologías eran realmente geniales y me metieron en la mentalidad de que, tú realmente podrías hacer cualquier cosa. Podrías hacer cualquier cosa. Me gusta. Super nerd, gran ejemplo. Muy bien.

Vale. Todos, levántense de nuevo. Levántense de nuevo. Una vez más. Ahora, quiero que imagines la semana pasada. Ahora, estás emocionado porque estás en la masterclass, esto no es sobre la masterclass, así que hace una semana, o el último proyecto en el que estuviste, ¿cuál era tu relación con React y la posibilidad creativa para ello, ¿verdad? Así que, esto es como hace una semana. Esto es reciente ahora. Así que, adelante y siéntate si eras un uno. Oh, vaya. Si eras un dos. Si eras un tres.

Vale. Y luego adelante y siéntate si eres un tres, ¿verdad? Eso resuena mucho conmigo. Entonces, para aquellos que no vieron en la sala, la mayoría de las personas se sentaron en dos, ¿verdad? Como, la creatividad y la posibilidad cambian con el tiempo. Pero, vaya. Estoy emocionado de mostrarles lo que está sucediendo con los React server components porque espero que podamos abrir para ustedes no cómo funcionan los componentes del servidor, nerd, muy interesante. Pero eso no es a lo que vamos. ¿Cuáles son las oportunidades y posibilidades que tenemos?

Vale. Entonces, primero, ¿qué es Redwood? Elfo en la sala, no sabemos qué es. Así que quería pasar por estas diapositivas muy rápidamente. Redwood es... ¿Tenemos la diapositiva correcta? No, esta era la diapositiva. Redwood, cuando lo lanzamos por primera vez, pila completa para el Jamstack. Eso era cierto, cierto hace unos tres años cuando lo lanzamos. Eso no es tan cierto hoy. Redwood es un marco de aplicaciones web de pila completa de JavaScript. En el futuro, vamos a ser el marco de aplicaciones web de pila completa. Así es. Vamos por el título. Y Tom Preston Warner, quien concibió Redwood, lo inició. Construyó una de las aplicaciones Ruby on Rails más grandes que existen. ¿Sabes? Siento que tenemos un contendiente. Aún no estamos allí, pero eso es a donde queremos ir.

Ciudadanos de primera clase. Lo que queremos decir cuando decimos pila completa, lo que necesitas saber es que Redwood es todas estas cosas reciben toda la atención, integración completa. Obtienen el estatus de ser ciudadanos de primera clase de Redwood. Voy a leer estos muy rápidamente. React, GraphQL, y Prisma. Tenemos un conjunto de pruebas de front end a back. TypeScript. Todos aquellos que yolo, sí, puedes ir estricto. Tenemos Vite CLI. Tienes generadores. Todo tipo de cosas que puedes hacer con un CLI. Muy parecido a Rails. Habilitado para caché. De serie. Authentication security. Redwood es seguro por defecto. Consideramos separaciones de preocupaciones. Tenemos una implementación de storybook de serie. Muy importante para un marco de pila completa de serie. Y también, Redwood está lleno de convenciones y un camino dorado para que comiences rápidamente y para permitirte mantener la mantenibilidad a medida que escalas. Todo esto está incorporado en Redwood. Esto es realmente importante para nosotros en la Cumbre de React. La database es un ciudadano de primera clase en Redwood. El servidor backend es un ciudadano de primera clase en Redwood. Y otro ciudadano de primera clase es la colaboración. Somos altamente colaborativos. Estamos trabajando con los equipos, construyendo todas estas herramientas todos los días. Estamos trabajando con el equipo de React en Meta semanalmente.

Se unen a nosotros para sesiones de trabajo. Y también colaboramos con nuestra community. Así que también te invitamos a colaborar con nosotros.

Redwood hoy. Es un proyecto independiente y de código abierto. Es gratis para usar. No estamos ganando dinero con Redwood, lo que plantea la pregunta, ¿cómo ganaremos dinero? No estamos ganando dinero hoy. No sé, Tom. ¿Tenemos una respuesta para eso? No, no sabemos. Quiero que la gente use Redwood primero. Tiene tres años. Tenemos más de 16K estrellas en GitHub. Ya estamos en la versión 6.4. Puedes hacer un despliegue de primera clase a Fastify. Así que somos Fastify primero, para el servidor completo. También puedes desplegar en AWS Lambdas. Lo que sabemos de las startups que usan Redwood y la infraestructura crítica, han recaudado más de $75 millones. Están escalando. Una nueva que debería emocionarte se llama Puzzmo.com. Eso es Orta Therix, y Orta está usando Redwood y Puzzmo. Y es super divertido. Es una pequeña aplicación de juegos. Piensa como los crucigramas del New York Times, solo que con todo tipo de otras cosas. Eso es Puzzmo.com. Creemos que Redwood es el mejor en su clase hoy. Marco SPA y marco GraphQL listo para usar. ¿Dónde está mi apartado? Haré un apartado aquí. Así que aparte. Te han mentido sobre GraphQL. ¿Lo sé, verdad? ¿Qué? GraphQL no es terrible. ¿Quién lo sabía? Ahora, hay cosas que son realmente difíciles sobre GraphQL, pero si puedes implementar esas cosas listas para usar y empezar con GraphQL y hacerlo fácil, resulta que GraphQL es una herramienta realmente poderosa. Simplemente no es genial para todo. Aquí hay algunas características de pila completa para Redwood. Podría hacer 20 minutos en cada una de estas. Pero esto es lo que queremos decir cuando decimos pila completa. ¡Hombre, estoy tan emocionado con estas! Solo puedo mostrar diapositivas, pero tengo una página que voy a enviarles al final, y ustedes pueden probar todas estas cosas por ustedes mismos, incluyendo nuestros experimentos y demos de RSE. ¿De acuerdo? Así que eso viene al final. Manténganse en sintonía. Características de pila completa, estas son las nuevas en Redwood, y estamos super emocionados con ellas. Redwood Realtime. Redwood Realtime, sin WebSockets. Pregúntame cómo en la sesión de preguntas y respuestas. Redwood JS Realtime. Ve a Realtime.RedwoodJS.com y tenemos cinco aplicaciones en una. Puedes probar nuestra aplicación de chat. Puedes probar nuestro temporizador de cuenta regresiva. Estos están usando suscripciones y lo que se llama consultas en vivo con GraphQL. Tenemos toneladas de documentation sobre esto. Es realmente divertido de usar. Esto es genial.

Esto está utilizando la API de OpenAI. Lo clavó a la primera. Lo arruinaré antes de terminar con esta sección. API de OpenAI. Puede llevar mucho tiempo obtener respuestas cuando estás golpeando ese mágico generador de IA. Puedes elegir algunas palabras y te cuenta una historia. Es realmente divertido. Hora de dormir con tus hijos. Este también es bueno. Elige dos películas. API de OpenAI. Dos veces seguidas, Jack. Clavado eso.

Esto también está utilizando suscripciones, por lo que crea una película basada en un mashup. Esta es una aplicación de licitación que utiliza consultas en vivo. Ve a probarlas. Son realmente divertidas. Esto está desplegado en fly. Creo que eso está utilizando superbase para el back end. Altamente performante. Realmente bien.

Vale. ¿Quién sabía que un mailer podría ser increíble? El mailer de Redwood es increíble. Porque resulta que, si puedes hacer tu plantilla dentro de tu marco de trabajo y luego previsualizarlas mientras estás desarrollándolas, ¿entonces el correo vuelve a ser divertido? ¿Quién lo sabía? Así que eso es lo que es el mailer de Redwood. Hay una API. Puedes alojarlo tú mismo. Puedes conectarte a otros proveedores. Esto es Redwood mailer. Y estás viendo la previsualización de la plantilla justo ahí. Y también, hacemos proxy de las solicitudes durante el desarrollo local. Así que puedes enviar correos electrónicos localmente para probar sin molestar a todos en tu base de datos de suscripción de correo. ¿Verdad? Así que no más pasantes enviarán su correo a todos en la lista. Es un correo electrónico de prueba. De todos modos, eso es Redwood mailer.

Redwood Studio. ¿No sería agradable si pudieras encender una aplicación de desarrollo local que te diera una visibilidad total y una introspección de lo que está sucediendo en tiempo de desarrollo. Así que esto está mostrando que tenemos telemetría abierta. Puedes ver rastreos de telemetría abierta durante el tiempo de desarrollo con Redwood Studio. Enciendes Redwood Studio ejecutando Redwood Studio. ¿Verdad? Así que esto está disponible para ti en la línea de comandos con Redwood. Más cosas sobre rastreos. Puedes hacer cosas con Prisma. Gráfico. Todo está ahí dentro de Redwood Studio. Redwood Studio es increíble. Y esto es lo que queremos decir cuando decimos pila completa. ¿Hasta ahora tiene sentido? Muy bien. Así que Redwood es un marco de trabajo de pila completa. Hay algunas cosas que son difíciles con Redwood. Resulta que somos los mejores en la clase SPA.

Hay muchos casos de uso para los que decimos a las personas que no usen Redwood si no es SPA. Probablemente algunas de las razones por las que podrías no haber usado Redwood hoy. Vale. No a todo el mundo le encanta GraphQL. Y lo entiendo. Hay algunas cosas que no quieres hacer con GraphQL que lo hacen difícil. Me estoy refiriendo a mis notas aquí. Una de ellas es... Oh, las notas son para el otro... No importa. Sin notas. Cosas que son difíciles con GraphQL. Una, comenzar con GraphQL. Si no necesitas GraphQL porque eres un cliente único o un equipo pequeño, no necesitas GraphQL para esas cosas. Y también, resulta que todavía hay una curva de aprendizaje. Y Redwood lo hizo realmente fácil para comenzar con GraphQL. Nos encargamos de todo el código de plantilla por ti. Manejamos los resolvers. Pero aún es difícil comenzar con GraphQL. Y francamente, esta es la razón número uno por la que creemos que las personas no usan Redwood hoy. Es porque no quiero usar GraphQL. Totalmente justo. Totalmente justo. Otra cosa que es difícil con Redwood es... Ah, ahí vamos. ¿Sabes qué? Seré honesto. Hicimos una implementación de React lo suficientemente buena para Redwood porque no éramos desarrolladores Reactivos. El secreto está fuera. Algunos de nosotros no éramos exactamente desarrolladores de Javascript cuando comenzamos el proyecto Redwood. Venimos de Ruby on Rails. Hemos trabajado en Python. Otros frameworks. Y entramos y trajimos lo mejor de la clase que amamos y dijimos... Queremos hacer esto dentro de Javascript, y queremos hacerlo con node. Así que teníamos mucho que aprender. Y francamente, no hicimos todo lo que esta community de desarrolladores de React, desarrolladores de marcos de trabajo React primero querían que hiciéramos en Redwood. Y por lo tanto, hay muchas opciones geniales para las cosas que quieres poder hacer en React que están disponibles ahora mismo. Y por eso algunas personas aún no han elegido Redwood. Funcionó realmente bien. Nuestras convenciones fueron increíbles. Pero todavía tenemos trabajo por hacer. Así que presentamos la Época Bighorn de Redwood. ¿No es esa una foto hermosa? Eso es realmente bonito. Así que no hacemos marketing alrededor de las versiones principales. ¿Verdad? Así que 6.7... Resulta que conocemos al tipo que hizo las standards SimVer. Así que rompemos cosas. Mejoramos. Pero tenemos lo que llamamos Épocas. Y eso es un poco nuestro marketing y nuestra hoja de ruta.

Y la Época Bighorn de Redwood está sucediendo ahora mismo. ¿Y cuál era la única cosa que quería que te llevaras de esta charla? Redwood está totalmente... Totalmente comprometido con React. ¿Ves? Jack lo entendió. Redwood está totalmente comprometido con React. Entonces, ¿de qué crees que trata la Época Bighorn? Redwood está totalmente comprometido con React. ¡Hombre! Puedo ver que estás aquí. Sé que es... Estoy ciego. En fin. Redwood está totalmente comprometido con React. Eso significa que nuestro código y nuestras características, nos estamos poniendo al día y luego yendo más allá. Nos estamos poniendo al día con el marco de React... Lo siento, con la hoja de ruta de React. Así que Redwood está totalmente comprometido con React. Vamos a colaborar con todos ustedes. Estamos colaborando con el equipo de React. Estamos colaborando... Tenemos a Lens del equipo de Apollo. Estamos trabajando en canales día a día, semana a semana con personas para colaborar en hacer que Redwood esté totalmente comprometido con React y qué significa eso, y también estamos colaborando con la comunidad. Así que estamos uniendo nuestras comunidades con otras comunidades y eso es lo que significa para Redwood estar totalmente comprometido con React. Puedes ver nuestra hoja de ruta allí abajo. Si escaneas esa cosa, te llevará allí. Pero ve a Redwoodjs.com/Roadmap.

Bien. Finalmente, el tipo va a hablar de lo que estaba en el título. ¿Verdad? Entonces, todo eso era ¿qué es Redwood? Y también, por qué — Estoy preparando las cosas aquí para mostrarte por qué Redwood y los Componentes del Servidor de React encajan muy bien. Entonces, ¿por qué Redwood eligió los Componentes del Servidor de React? Estas son las tres cosas de las que voy a hablar a continuación. Es lo que viene después del streaming y suspense. Construimos una solución para el streaming y suspense. Te lo mostraré. Y resulta que si vamos a seguir el ritmo de la hoja de ruta de React, estamos dentro. Estamos a favor de los Componentes del Servidor de React, al igual que el equipo de React. Pero solo estamos — estamos en la hoja de ruta ahora. Además, creo que fue Sebastian quien escribió un artículo sobre lo que viene después de GraphQL. Hay algunas cosas que voy a mostrarte sobre cómo, cuando has construido un marco que da ciudadanía de primera clase para GraphQL, resulta que los conceptos y parte del diseño arquitectónico para RSC — se combina muy, muy bien, porque están altamente relacionados. Y luego, también, vamos a hablar de esta cosa que simplemente estoy llamando Fetch Anything por Ahora. No voy a hacer una inmersión profunda en qué es RSC, cómo implementarlo. Nuestra creencia es que el marco va a hacer mucho de eso por ti. Necesitarás entender cómo funciona, pero no voy a entrar en el código. Tengo algo más sobre eso más tarde. Puedes ver cómo funciona el código. Tenemos algunas buenas demostraciones. Pero hablemos de cómo el equipo de React habla de qué es RSC. RSC combina un modelo mental de solicitud-respuesta simple de aplicaciones multipágina centradas en el servicio — hablaron de esto en el panel antes del almuerzo, si lo recuerdas — con la interactividad sin fisuras de las aplicaciones de una sola página centradas en el cliente, dándote lo mejor de ambos mundos. ¿Verdad? Entonces, poder cambiar de ese modelo centrado en el servidor a el modelo centrado en el cliente y poder, en algunos casos, fusionar esos dos modelos mentales en un caso de uso es realmente agradable. Te voy a mostrar lo que eso significa para Redwood.

Entonces, primero, streaming y suspense — probablemente no lo sepas pero Redwood tiene capacidades de SSR. Así que, déjame mostrarte — construimos esto para la Conferencia de Redwood, que fue hace un mes — esta era nuestra aplicación de entradas y credenciales. Y esto es Redwood SSR utilizando el streaming y suspense de React. Habíamos estado trabajando en esto a finales del año pasado. Bueno, déjame mostrarte lo que es, y luego te diré lo que hicimos con ello. Pero mira esto. Ticket.redwoodjs.com. Entonces, ya está ahí, pero se transmitió — esa era en realidad una página pre-renderizada. ¿Bonita interactividad, verdad? Es tu dirección de correo electrónico, y te va a permitir autenticarte en segundo plano con GitHub. Y ahora tengo una aplicación de credenciales personalizadas. Nota que acabo de copiar esa URL para compartir, y con Redwood antes, ¿qué esperarías ver aquí? Nada. ¿Y qué ves ahora? Ves todas tus etiquetas OG de cabecera. Y todo eso fue en tiempo real. Es así de rápido, está desplegado en fly, y está utilizando Neon para la database en esto. Y esto está disponible ahora. Así que, puedes hacer SSR con Redwood. Teníamos una función de pre-renderizado disponible antes, pero ahora puedes hacer una renderización completa del lado del servidor con Redwood. Construimos esto antes de decidir hacer RSC. Pero resulta que todos los bloques de construcción que necesitas para RSC, ya los manejamos porque cambiamos a VEET para nuestro bundler. Estamos ejecutando VEET en el servidor, así que ahora tenemos un servidor frontend. Tenemos nuestro propio enrutador, el enrutador de Redwood. Cambiamos y re-arquitecturamos bajo el capó para usar un enrutador suspense. Y nos encanta lo que somos capaces de hacer con SSR, y RSC es una combinación natural porque va a vivir justo encima de eso.

Entonces, hablé de esto antes. En segundo lugar, RSC y GraphQL, son muy complementarios tanto en términos de conceptos, lo que puedes hacer, pero también debido a las formas en que incorporamos convenciones y este camino dorado en Redwood con GraphQL. RSC simplemente tiene sentido en el contexto de Redwood, por lo que, por ejemplo, no necesitamos crear otro enrutador para Redwood, simplemente integraremos RSC directamente en él y encima de él.

Quiero mostrarte, muy rápidamente, este Patrón de Fragmentos de GraphQL. Esto podría tener sentido para ti. Para aquellos que trabajan en Apollo Client en la sala, por favor tapen sus oídos y cierren sus ojos por un segundo. Y luego quiero mostrarte una implementación de Redwood de Componentes del Servidor con Acciones del Servidor, porque creo que es cierto que somos el segundo marco de trabajo para implementar Acciones del Servidor después de Next. Entonces, sí, adelante Redwood. Toby, en realidad, adelante con Toby. Ese chico es increíble. ¿Verdad, Tom? Toby lo está matando.

Bueno, entonces, rápido, hablemos sobre los Fragmentos de GraphQL. Lo sé, ya estás pensando, no vine por GraphQL. Pero esta es una idea realmente interesante a alto nivel. Y para aquellos que usan Next y para aquellos que usan Remix, esto debería parecer realmente similar. Así es como funcionan los Fragmentos. Así es como funciona Relay. Tienes un componente padre, y tienes una consulta raíz dentro de él. Todos los datos que necesitas para todos los componentes en esa página, vas a obtenerlos con ese componente raíz. Así es como funcionan los fragmentos, ¿vale? Entonces, el componente padre, va a obtener los datos, renderizar, y ahora tiene todos los datos que necesita en la página, porque sabe acerca de estas consultas de fragmentos dentro de los componentes hijos, hijo uno e hijo dos. Entonces, ¿qué sucede? Obtiene la consulta raíz, obtiene todos los datos, los pasa. Los fragmentos saben qué campos solicitar, por lo que los datos están allí, y luego en los Fragmentos y en el modelo de GraphQL, toda tu caché, todas tus actualizaciones, simplemente ocurren automáticamente detrás de escena. Apollo Client hace esto muy bien. Hay startups de Redwood que están utilizando este patrón a gran escala, y funciona realmente bien. Altamente eficiente, increíblemente rápido. Y de nuevo, supongamos que actualizas esa consulta raíz con una mutación, por lo que hay una actualización de los datos en tu página, y luego todo, en un bonito flujo detrás de escena, se actualiza y se vuelve a renderizar automáticamente. Eso suena genial, ¿verdad? Puede ser realmente difícil, pero eso suena genial. Entonces, ¿qué pasaría si pudiéramos hacer eso con algo que no fuera GraphQL y tuviera un poco más de sentido dentro del mundo de React? Bueno, échale un vistazo. Esto es, y solo tengo 30 segundos para mostrarte, esta es una aplicación real con la que puedes jugar más tarde. Esta es la acción del servidor de Redwood. Y un par de cosas que quiero señalar antes de ejecutar la demostración. Observa que ya está renderizando un componente del servidor y un componente hijo. Esta es una funcionalidad que está funcionando en Redwood en este momento. Y lo que estás a punto de ver es cómo podemos interactuar con un componente del cliente. Quédate en el componente del cliente y mira lo que sucede. Lo estoy ejecutando ahora. Mira lo que sucede con el componente del servidor, ¿verdad? Entonces, el cuadro rojo, el padre exterior es el componente del servidor. Componente hijo, componente del cliente dentro. Bien, entonces hablaremos de un par de cosas aquí muy rápido. Pero observa, los dos contadores están subiendo por separado. ¿Viste la obtención de datos cuando se incrementó el componente del servidor? ¿Alguien notó lo que acaba de suceder allí cuando la página se volvió a renderizar? Voy a ejecutar esto dos veces. Bueno, la página se vuelve a renderizar. Eso es todo. Y lo voy a ejecutar una vez más. Bueno, un par de cosas suceden aquí. De hecho, Tom habló de esto durante 20 minutos en una masterclass. Te diré cómo llegar a esto y pasar por la presentación completa aquí. Correcto, se está gestionando el estado en el cliente para el componente del cliente. Cuando disparas la acción del servidor, estás viendo una obtención de datos allí, esa es una acción del servidor, se actualiza en el servidor, y eso actualiza el componente del servidor, ¿verdad?, que luego pasa todo lo que necesitas, ¿verdad?, tanto el componente como los datos se pasan desde el servidor.

Voy a ejecutar esto una vez más. Entonces, ¿alguien nota qué sucede cuando se actualiza la página, verdad? Ese es el modelo mental que quiero que comprendas. Junto con esto es solo como magia en general. Así que los componentes del cliente están siendo integrados. ¿Dónde está ocurriendo el estado para el componente del cliente? En el cliente. ¿Vale? La página está a punto de ser actualizada. Observa el contador del servidor. El contador del servidor no cambió. ¿Por qué? ¿Dónde está el estado para el contador del servidor? ¿Cómo llamamos a menudo al estado en un servidor? Una database. Bien, vas a necesitar una database. Redwood tiene una database. Pero, ¿no es eso increíble? Bueno, lo siento. Solo creo que pensamos que esto es realmente genial. Bien. Entonces, resulta que RSC va genial con GraphQL y las acciones del servidor son increíbles, vas a querer usarlas. Son geniales. Bueno, a continuación, obtén cualquier cosa. Tenemos una convención llamada una celda de Redwood. Permíteme mostrarte esto con GraphQL. Bueno, ¿qué sucede si creamos una celda del servidor de Redwood con punto, punto, punto? Esto es lo que quiero mostrarte a continuación. Así que obtener cualquier cosa tendrá sentido aquí en un segundo. Bien. Ni siquiera puedo ver tus manos. Iba a pedirte que levantaras la mano. Una convención de celda de Redwood es efectivamente un componente de orden superior que hace todo lo que necesitas en un componente para obtener y el estado del componente. Bien, lo que estás viendo aquí, mucho código. Muy simple. Tienes una consulta GraphQL. Esa es tu obtención. Y luego tienes, ves, los componentes para cargar, vacío, fallo y éxito. ¿Correcto? Así que todos estos están manejados. Así que todo el ciclo de vida del estado se maneja dentro de un componente del cliente. Esto es real. Esto es lo que las startups están utilizando cuando construyen con Redwood hoy. Este es un componente de celda de Redwood. ¿Vale? Observa dónde está eso. Entonces, ¿qué sucede si usas una celda del servidor? Digamos, por ejemplo, que quieres importar el cliente de la database. Y luego, en lugar de hacer una consulta a través de GraphQL, simplemente haces una consulta a la database justo allí dentro de un componente del servidor. ¿Correcto? Esto es absolutamente posible. Este es un gran momento de revelación para nosotros con las celdas del servidor de Redwood, tal vez. Aquí es donde empezamos a pensar, ¿qué pasaría si? Así que esto es posible. Probablemente esto no es lo que vas a querer hacer. Pero de repente, con los componentes del servidor, Redwood pasa de GraphQL a poder obtener de cualquier lugar, de cualquier fuente de data, incluyendo solo una consulta directa de data desde tu database o cualquier otra fuente de data. ¿Tiene sentido? Probablemente no quieras hacer esto, sin embargo. Entonces, ¿qué viene para Redwood con RSCs? Esto es enorme para nosotros, porque te dije ¿cuál es una de las razones por las que la gente no usa Redwood ahora mismo? GraphQL. Entonces, ¿qué sucede si no necesitas GraphQL para empezar? ¿O GraphQL en absoluto? ¿Probarías Redwood entonces? Vamos, levanta la mano. Sé que lo harás. Bueno, de todos modos, gracias.

Jack está conmigo aquí arriba. Eso es bueno. Es bueno que esté en la primera fila. Primero, estamos realmente emocionados por lo que es posible aquí. Esto es algo en lo que nos topamos. Esta API transparente, además de GraphQL, es algo que vamos a descubrir y hacer muy poderoso en los componentes del servidor de Redwood.

Esta idea de obtener datos de cualquier data fuente, queremos mantenerla sensata, es lo que realmente hará posible hacer todo tipo de cosas con la implementación de los Componentes del Servidor de React de Redwood. Y solo para aclarar, así es como vemos mantenerlo sensato. ¿Cómo podría fluir tu data? Si tienes una database, que podrías no necesitar una database, tus servicios, tus data para tu database irán a tus servicios. Ese es un concepto en Redwood. Tenemos una convención para los servicios. Ahí es donde va toda tu lógica de back end. Así que eso existe en Redwood hoy, tus servicios donde irá tu lógica de back end para cualquier fuente de data que estés golpeando, pero los data fluirían desde la database, en este caso servicios. Y tus servicios, ahí es donde el flujo de data fluiría a tu web. Así que vas a importar una función de tus servicios. Será seguro en todo tu aplicación y tendrás algunas formas sensatas de trabajar con cualquier fuente de data que quieras dentro de tus Componentes del Servidor de React de Redwood. Estamos súper emocionados por eso.

Muy bien. Así que una nueva API transparente está llegando a Redwood. No sabemos cómo será el design de eso, pero nos encantaría que nos dijeras qué quieres que haga. Y la persona con la que hablar es Tom, él está en la sala. Así que la última, última cosa. Esto es el bonus. Como esto es realmente por qué Redwood, esto es el por qué, por qué, por qué Redwood está eligiendo los Componentes del Servidor de React. Porque los Componentes del Servidor de React nos hicieron empezar a preguntar, ¿qué pasaría si? Y recuerdas esa cosa de posibilidad creativa de la que hablé al principio? Como los Componentes del Servidor de React han sido eso para el equipo de Redwood. Nos ha hecho preguntar ¿qué pasaría si? Nos ha hecho emocionarnos mucho, a ser creativos sobre las posibilidades. Ha abierto para el marco de Redwood. Y de nuevo, Redwood define su éxito haciendo que otros tengan éxito. Así que ver lo que las startups van a poder hacer y lo que van a poder construir, o cualquier constructor va a poder hacer con Redwood debido a los Componentes del Servidor de React, eso es nuestro rollo. Así que estamos realmente emocionados por eso. Así que si nos haces el honor, esto es parte de colaborar con la community. Como dije, este no ha sido nuestro mundo, React en esta community. Todos ustedes han estado inmersos aquí. Y saben mucho más profundamente lo que es posible con React incluso que nosotros. Entonces, ¿nos dirías, como ahora mismo? No sé, saca ese teléfono o ese gadget contigo. Y ¿te gustaría, como, si estás en la aplicación del foro, y tu nombre es Twitter, ese es el mío, David Price y Tom en Majumbo. ¿Nos dirías, cuál es tu ¿qué pasaría si? Como, ¿qué pasaría si los Componentes del Servidor de React pudieran hacer factura en el punto, nos enviarías eso? Como, queremos saber. Envíanoslo en Twitter. También estoy en LinkedIn. No sé cómo etiquetarme allí, pero soy David S. Price. No soy el jugador de béisbol. No soy el orador motivacional de Australia. No soy el futbolista británico ni el congresista estadounidense. Soy David Price. Suena pretencioso, pero es en tono de broma. Pero queremos escuchar. Quédate con nosotros después en la sesión de preguntas y respuestas, queremos saber. Un par de próximos pasos para cómo puedes unirte a nosotros.

Amy Dutton, quien también forma parte del equipo de liderazgo de Redwood, va a presentar una masterclass en dos días el jueves. Esa es una de las masterclasses gratuitas, si compraste una entrada aquí. Es cómo hacer pila completa para React, pero ella va a hablar sobre Redwood, cómo hacer pila completa React, y también lo que viene con los React server components. Ella hablará de eso.

Y luego está esto, ¿ves eso de ahí abajo? Redwoodjs adelante barra React Summit. Eso es un documento de Notion que tiene todo de lo que acabo de hablar. Tenemos demostraciones rápidas que puedes iniciar para cada ejemplo de servidor de React que tenemos ahora mismo. Si quieres jugar con las acciones del servidor, ve allí. Tom hizo una increíble presentación en nuestra conferencia. Él va a estar escribiendo. Tendremos un blog próximamente. Así que podrás ver, si quieres las inmersiones profundas, estamos publicando todo eso en el documento de Notion. Así que ve a Redwoodjs.com, React Summit.

Y me tomó tres minutos menos de lo que pensé. Así que tenemos tiempo para preguntas. Tenemos tres minutos. Muchas gracias. Espero que sepas que estamos totalmente comprometidos con los React server components. ¿Captaste ese punto? Oh, lo siento. Estamos totalmente comprometidos con React. Eso es. Eso es todo lo que quería que supieras. Muy bien. Bueno, hay otro marco RSC por ahí. Sí, Next.js. Entonces, para todas estas personas en la audiencia, ¿cuál es tu discurso de ascensor sobre por qué deberían elegir Redwood.js sobre Next.js? Sí. Entonces, permíteme empezar desde aquí. Podrías terminar usando ambos. Así que ahora mismo, hay muchas aplicaciones de Next que en realidad están alimentadas por la API de Redwood. Así que eso es real. Si quieres usar la plataforma Vercel, es imposible de superar, ¿verdad? Como, la plataforma de Vercel. Entonces, cuando pienso en, como, ¿cómo se ve una aplicación de pila completa de Next? Realmente, es como Next más Vercel, ¿verdad? Como, eso es pila completa para Next. Y quiero decir, francamente, son los únicos. Pero si vas a empezar... Entonces, uno, si quieres convenciones y quieres un camino dorado y quieres lo que ahora estamos llamando, como, algo que Next ha hecho realmente, realmente bien es lo que llamo hackathonabilidad. Eso estaba en mis notas, debería haber llegado allí. Como, Redwood no es muy hackathonable ahora mismo, ¿verdad? Pero habrá cosas que puedes hacer con Redwood de la caja con los React server components que lo hacen mucho más de una, como, aplicación de inicio temprano. Entonces, ¿por qué elegir Redwood? Creemos que los React server components van a encajar más naturalmente en Redwood que en cualquiera de los frameworks existentes ahora mismo. Y una de las razones para eso que puedes ver ahora mismo es, como, el enrutador de Redwood fue construido para ello. No hablé de eso. No necesitas otro enrutador de aplicación. Como, no vas a tener opciones. No vas a tener que elegir el enrutador de página o el enrutador de la aplicación. Como, eso será una sola cosa. Puedes hacer ambas cosas dentro de un contexto con Redwood. Además, Redwood es, Remix va a tener algunos desafíos similares también. Ahora llegarán allí, esos son todos grandes frameworks. Y entonces la otra cosa es, como, Redwood es un proyecto de código abierto independiente, ¿verdad? Así que creo que eso va a hablar a mucha gente en términos de, como, querer sentir, quiero ser parte del código abierto, quiero impulsar parte de la visión detrás de él. Somos mucho más pequeños. Quiero decir, NeXT está abriendo el camino, y no quiero decir nada.

De hecho, estamos aprendiendo de ellos cómo hacer esto, ¿verdad? Así que para poner eso ahí. Pero, sí, si quieres, va a sentirse diferente. Va a haber un ambiente diferente, y vas a poder tener un tipo diferente de participación en la community, que es algo que nos importa mucho. Y vas a tener una sensación diferente de cómo puedes realmente influir en la dirección del proyecto, también. Así que creo que esas son algunas razones realmente geniales para involucrarte.

Y, francamente, no lo sé. Sé que después de la fiesta, la gente va a estar de vuelta en el hotel. No van a tener sueño. Van a decir, hey, quiero probar algo. ¿Cómo van a empezar con Redwood.js? ¿Deberían ir a ese documento de Notion? ¿Hay algunas buenas aplicaciones de muestra allí para empezar? Sí. ¿Cómo empiezan con esto?

Gracias, Jack, esa es otra gran pregunta. Así que, en este momento, la mejor manera de empezar con Redwood es el tutorial de Redwood, que es más como un curso. Es realmente increíble si quieres aprender desarrollo de pila completa y GRaphQL. Estamos en medio de esto ahora mismo. Tenemos el mismo problema que el equipo de React en una escala mucho, mucho menor, que es que todo esto está funcionando en Canaries y Experimental. Te recomiendo mucho que vayas a nuestros foros. Así que, community.redwoodjs.com, y ahí es donde verás estos ejemplos. Verás una publicación en el foro que trata solo sobre RSC. Toby está dejando allí todo el registro de cambios de desarrollo. Las aplicaciones de ejemplo están allí. Así que, en este momento, si vas a nuestra documentación, lo mismo que está pasando en React. Todos nuestros documentos son para la versión estable 6.4. Si quieres jugar con todas estas cosas nuevas que están sucediendo con los componentes del servidor de React, esos están en nuestras versiones Experimental Canary, y todo eso está sucediendo en tiempo real en nuestros foros. Pero ahí es donde nos comprometemos con la community para darte actualizaciones de lo que está sucediendo en este momento. El mejor lugar para probar esas cosas es entrar en nuestros foros y seguir los pasos y los comandos de configuración desde allí.

Muy bien, fantástico. ¿Fue esa una buena respuesta? Sí, estuvo genial. Muy bien. A Jack le gustó. Aplaudan de nuevo a Dave Price. Gracias. Muy bien, amigo. Gracias. Muy bien hecho, señor.