Versión en EspañolES

[EN] React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
[ES] React Server Components Unleashed: Un profundo buceo en el desarrollo web de próxima generación

React Server Components Unleashed: Un profundo buceo en el desarrollo web de próxima generación

Maurice de Beijer

Independent Software Consultant and Trainer

Recording and certification are available to Multipass and Full ticket holders only

Please login if you have one.

Get Multipass

Bookmark

Slides Github

¡Prepárate para potenciar tus habilidades de desarrollo web con React Server Components! En esta inmersiva masterclass de 3 horas, desbloquearemos todo el potencial de esta tecnología revolucionaria y exploraremos cómo está transformando la forma en que los desarrolladores construyen aplicaciones web rápidas y eficientes.

Únete a nosotros mientras nos adentramos en el emocionante mundo de React Server Components, que combina a la perfección la renderización del lado del servidor con la interactividad del lado del cliente para un rendimiento y una experiencia de usuario inigualables. Obtendrás experiencia práctica a través de ejercicios prácticos, ejemplos del mundo real y orientación experta sobre cómo aprovechar el poder de los Server Components en tus propios proyectos.

A lo largo de la masterclass, cubriremos temas esenciales, incluyendo:

- Entender las diferencias entre los componentes del servidor y del cliente

- Implementar Server Components para optimizar la obtención de datos y reducir el tamaño del paquete de JavaScript

- Integrar Server y Client Components para una experiencia de usuario fluida

- Estrategias para pasar datos eficazmente entre componentes y gestionar el estado

- Consejos y mejores prácticas para maximizar los beneficios de rendimiento de React Server Components

Nivel de la masterclass:

No importa tu nivel actual de experiencia en React, esta masterclass te equipará con el conocimiento y las herramientas para llevar tu juego de desarrollo web a nuevas alturas. No pierdas esta oportunidad de mantenerte a la vanguardia y dominar la tecnología de vanguardia que está cambiando la cara del desarrollo web. ¡Inscríbete ahora y desata todo el poder de React Server Components!

This workshop has been presented at React Advanced 2023, check out the latest edition of this React Conference.

FAQ

Los React Server Components son una tecnología que permite ejecutar componentes de React en el servidor, lo que permite una mejor optimización de la carga y la performance al no enviar código innecesario al cliente. Estos componentes son diferentes del renderizado tradicional del lado del servidor y permiten una carga asincrónica de datos y componentes.

Los React Server Components son ideales para partes de la aplicación que no requieren interactividad directa con el usuario, como la generación de contenido estático o el manejo de datos. Para interacciones dinámicas, se recomienda usar componentes del lado del cliente.

Next.js es un framework de React que proporciona funcionalidades como el enrutamiento y la generación de sitios estáticos o dinámicos. Next.js es compatible con React Server Components, facilitando la implementación de estos componentes en aplicaciones Next.js para optimizar la carga y el rendimiento.

Para trabajar con React Server Components, se necesita una versión reciente de Node.js, acceso a un servidor y conocimientos básicos de React y, preferiblemente, de Next.js. Además, es crucial tener instalado Git y NPM.

Para convertir componentes tradicionales en React Server Components, se deben modificar para que no utilicen estados o efectos que dependan de la renderización del lado del cliente. Esto implica cambiar la forma en que se manejan los datos y las interacciones, utilizando técnicas como la carga asincrónica de datos y el manejo de eventos en el servidor.

Los React Server Components ofrecen varias ventajas, como la reducción del tamaño del código enviado al cliente, la mejora en la velocidad de carga de la aplicación, y la capacidad de mantener datos sensibles y lógica del lado del servidor, lo que aumenta la seguridad y el rendimiento.

react server components

Maurice de Beijer

153 min

26 Oct, 2023

Comments

Sharon Jeffe
Abel & Cole
Will this workshop be recorded and available online at a later date?
10:59 Oct 26, 2023

Video Summary and Transcription

React Server Components Unleashed es una masterclass que cubre los fundamentos, el uso y los beneficios de los componentes del servidor React. Explora Next.js, la caché, la suspensión y la migración de Next.js a los componentes del servidor React. La masterclass también discute la compatibilidad con las tecnologías de back-end, la seguridad de las claves API, la caché y el control de los componentes del servidor React. Destaca las diferencias entre la renderización del lado del servidor y los componentes del servidor React y proporciona ideas para optimizar la obtención de datos, añadir componentes de carga y utilizar la suspensión. La masterclass concluye con recomendaciones para desarrollar con componentes del servidor React y los desafíos que pueden surgir.

Available in English: React Server Components Unleashed: A Deep Dive into Next-Gen Web Development

Video transcription and chapters available for users with access.

Available in other languages:

Watch more workshops on topic

Next.js 13: Estrategias de Obtención de Datos

React Day Berlin 2022

53 min

Next.js 13: Estrategias de Obtención de Datos

Top Content

WorkshopFree

Alice De Mauro

- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión

performance next.js best practices react server components

La Puerta al Backend: Guía del Desarrollador Frontend para el Desarrollo Full-Stack

React Summit US 2023

160 min

La Puerta al Backend: Guía del Desarrollador Frontend para el Desarrollo Full-Stack

Top Content

WorkshopFree

Amy Dutton

Esta masterclass te guiará a través del ciclo de vida del desarrollo de productos para crear una aplicación web del mundo real. Aprenderás sobre los Componentes del Servidor React, construyendo un sistema de diseño dentro de Storybook, y utilizando el desarrollo frontend para acercarte a convertirte en un desarrollador full-stack. La masterclass cubrirá el aumento de la confianza en tu aplicación con pruebas unitarias e implementando autenticación y autorización. Tendrás la oportunidad de trabajar a través de las características del producto y examinar un proyecto real de RedwoodJS, obteniendo valiosa experiencia en el desarrollo de productos del mundo real. RedwoodJS hace que sea simple acercarse al desarrollo full-stack, y esta masterclass te dará las habilidades que necesitas para crear tus propias aplicaciones web del mundo real.

react react server components

Patrones Avanzados de Despliegue de Aplicaciones con Componentes de Servidor React (feat. un Marco RSC DIY)

React Summit US 2023

104 min

Patrones Avanzados de Despliegue de Aplicaciones con Componentes de Servidor React (feat. un Marco RSC DIY)

Top Content

WorkshopFree

Greg Brimble

El ecosistema de desarrolladores siempre está avanzando rápidamente y este año no ha sido una excepción. Los Componentes de Servidor React pueden ofrecer una mejora significativa a la experiencia del desarrollador y al rendimiento de la aplicación. Pero creo que es justo decir que este nuevo paradigma de servidor primero puede ser complicado de entender!En la primera mitad de esta masterclass, exploraremos los Componentes de Servidor React desde cero: construyendo nuestro propio mini marco meta para ayudarnos a entender cómo funcionan los RSCs. Descubriremos exactamente qué se produce en una construcción RSC y conectaremos esas piezas para formar una aplicación completa.A continuación, ¡lo desplegaremos! Cloudflare también ha tenido un año ocupado — Smart Placement, en particular, es una nueva tecnología que hemos desarrollado que se ajusta perfectamente al modelo RSC. Exploraremos por qué eso tiene sentido para nuestra aplicación de masterclass, y realmente lo desplegaremos en la Plataforma de Desarrolladores de Cloudflare.Finalmente, ampliaremos un poco más nuestra aplicación, utilizando D1 (nuestra base de datos SQL sin servidor) para mostrar realmente el poder del Componente de Servidor React cuando se combina con Smart Placement.Deberías salir de esta masterclass con una mayor comprensión de cómo funcionan los Componentes de Servidor React (tanto detrás de las escenas como también cómo tú como desarrollador puedes usarlos día a día), así como una visión de algunos de los nuevos patrones de despliegue que ahora son posibles después de las recientes innovaciones en el espacio de la plataforma.

react server components

Construyendo Componentes de Servidor Reutilizables en NextJS

React Summit US 2023

88 min

Construyendo Componentes de Servidor Reutilizables en NextJS

Workshop

2 authors

React continúa evolucionando su capacidad beta, los Componentes de Servidor de React, y continúan desarrollándolos en asociación con marcos como NextJS.En esta masterclass, los asistentes aprenderán qué son los Componentes de Servidor de React, cómo construirlos y usarlos eficazmente en NextJS, y se centrarán en una de las principales ventajas de React/NextJS: la reutilización a través de componentes.También cubriremos tecnologías beta relacionadas habilitadas por el directorio `app`, como los layouts anidados y las acciones del servidor (capacidad alfa/experimental).¡Únete a nosotros para esta masterclass práctica de 120 minutos!Tecnologías:
React, JavaScript/Typescript, NextJS, Miro

next.js react server components

Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación

React Day Berlin 2023

149 min

Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación

Workshop

Maurice de Beijer

¡Prepárate para potenciar tus habilidades de desarrollo web con los Componentes del Servidor React! En esta inmersiva masterclass de 3 horas, desbloquearemos el potencial completo de esta tecnología revolucionaria y exploraremos cómo está transformando la forma en que los desarrolladores construyen aplicaciones web rápidas y eficientes.
Únete a nosotros mientras nos adentramos en el emocionante mundo de los Componentes del Servidor React, que combinan sin problemas el renderizado del lado del servidor con la interactividad del lado del cliente para un rendimiento y una experiencia de usuario inigualables. Obtendrás experiencia práctica a través de ejercicios prácticos, ejemplos del mundo real y orientación experta sobre cómo aprovechar el poder de los Componentes del Servidor en tus propios proyectos.
A lo largo de la masterclass, cubriremos temas esenciales, incluyendo:- Entender las diferencias entre los Componentes del Servidor y del Cliente- Implementar Componentes del Servidor para optimizar la obtención de datos y reducir el tamaño del paquete JavaScript- Integrar Componentes del Servidor y del Cliente para una experiencia de usuario fluida- Estrategias para pasar datos efectivamente entre componentes y gestionar el estado- Consejos y mejores prácticas para maximizar los beneficios de rendimiento de los Componentes del Servidor React

javascript react server components

Dominando React Server Components y Server Actions en React 19

React Advanced 2024

160 min

Dominando React Server Components y Server Actions en React 19

Workshop

Maurice de Beijer

¡Llamando a todos los desarrolladores de React! Únete a nosotros para una inmersiva masterclass de 4 horas profundizando en React Server Components y Server Actions. Descubre cómo estas tecnologías revolucionarias están transformando el desarrollo web y aprende a aprovechar su máximo potencial para construir aplicaciones rápidas y eficientes.
Explora el mundo de React Server Components, combinando sin problemas el renderizado del lado del servidor con la interactividad del lado del cliente para un rendimiento y experiencia de usuario incomparables. Sumérgete en React Server Actions para ver cómo combinan la interactividad del lado del cliente con la lógica del lado del servidor, facilitando el desarrollo de aplicaciones interactivas sin las limitaciones tradicionales de API.
Obtén experiencia práctica con ejercicios prácticos, ejemplos del mundo real y orientación experta sobre la implementación de estas tecnologías en tus proyectos. Aprende temas esenciales como las diferencias entre Server y Client Components, optimización de la obtención de datos, pasando datos de manera efectiva y maximizando el rendimiento con nuevos hooks de React como useActionState, useFormStatus y useOptimistic.
Ya sea que seas nuevo en React o un profesional experimentado, esta masterclass te equipará con el conocimiento y las herramientas para elevar tus habilidades de desarrollo web. Mantente a la vanguardia y domina la tecnología de vanguardia de React 19. No te lo pierdas: regístrate ahora y desata todo el poder de React!

react server components react 19

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

Simplificando los Componentes del Servidor

React Advanced 2023

27 min

Simplificando los Componentes del Servidor

Top Content

Mark Dalgleish

Shopify

React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.

react server components

Explorando los fundamentos de los Componentes del Servidor React

React Day Berlin 2023

21 min

Explorando los fundamentos de los Componentes del Servidor React

Top Content

Daishi Kato

Zustand, Jotai & Waku author

This Talk introduces React Server Components (RSC) and explores their serialization process. It compares RSC to traditional server-side rendering (SSR) and explains how RSC handles promises and integrates client components. The Talk also discusses the RSC manifest and deserialization process. The speaker then introduces the Waku framework, which supports bundling, server, routing, and SSR. The future plans for Waku include integration with client state management libraries.

react server components

Y Ahora Entiendes los Componentes del Servidor React

React Summit 2024

27 min

Y Ahora Entiendes los Componentes del Servidor React

Top Content

Kent C. Dodds

Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com

In this Talk, Kent C. Dodds introduces React Server Components (RSCs) and demonstrates how to build them from scratch. He explains the process of integrating RSCs with the UI, switching to RSC and streaming for improved performance, and the benefits of using RSCs with async components. Dodds also discusses enhancements with streaming and server context, client support and loaders, server component rendering and module resolution, handling UI updates and rendering, handling back buttons and caching, and concludes with further resources for diving deeper into the topic.

react server components

Una Guía Práctica para Migrar a Componentes de Servidor

React Advanced 2023

28 min

Una Guía Práctica para Migrar a Componentes de Servidor

Top Content

Fredrik Höglund

ephem.dev

React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.

react react query next.js case study react server components react 18

Componentes del Servidor: La Épica Historia de Renderizar UX

React Summit 2023

26 min

Componentes del Servidor: La Épica Historia de Renderizar UX

Top Content

Nikhil Sharma

Postman

This Talk introduces server components in React, which provide an intermediate format for rendering and offer advantages for both client-side and server-side rendering. Server components reduce bundle size on the client and improve search engine optimization. They abstract the rendering process, allowing for faster rendering and flexibility in choosing where to render components. While server components are still in the experimental stage, Next.js is a good starting point to try them out.

react performance ssr react server components react 18

RSCs en Producción: 1 Año Después

React Summit 2024

24 min

RSCs en Producción: 1 Año Después

Theo Browne

TypeScript YouTuber who happens to run dev tools company. Known primarily for memes, hot takes, and building useful things for devs such as UploadThing and the T3 Stack.

This Talk explores the experience of shipping server components in production and highlights the benefits and challenges of using Server Components in Next.js apps. The Talk discusses the deployment of UploadThing and the use of AppRouter for safe production usage. It delves into the implementation of different layouts, data fetching, and code centralization for improved performance. The Talk also covers the use of server components for performance optimization and latency handling. Additionally, it explores the use of Edge and Lambda for partial pre-rendering and the challenges faced with webpack performance and hydration. Overall, the Talk emphasizes the benefits and challenges of working with Server Components in Next.js applications.

react server components