Componentes del Servidor al Rescate: Turboalimentando y Potenciando Tus Aplicaciones React con Estilo

Rate this content
Bookmark

Únete a nosotros mientras nos sumergimos en el emocionante mundo de los Componentes del Servidor React, una característica diseñada para revolucionar la forma en que construimos aplicaciones web. En esta charla llena de acción, exploraremos los principales beneficios de los Componentes del Servidor, como la reducción del código del lado del cliente, el mejor rendimiento y la experiencia de desarrollo simplificada. A través de ejemplos atractivos y demostraciones en vivo, aprenderás cómo integrar los Componentes del Servidor en tus proyectos React y aprovechar su poder para crear experiencias de usuario de próximo nivel. ¡No pierdas esta oportunidad de mantenerte a la vanguardia y elevar tus habilidades en React!

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

FAQ

Los componentes del servidor de React son una arquitectura que permite renderizar componentes de React en el servidor, mejorando la experiencia del usuario al reducir la cantidad de código necesario en el cliente y optimizando las métricas de rendimiento.

Las principales ventajas incluyen mejoras en la velocidad de construcción, facilidad de mantenimiento, mejoras en las métricas de rendimiento y una mejorada experiencia de usuario, gracias a la capacidad de manejar formatos de datos y tener un acceso completo al backend sin costos adicionales de tiempo de inicio.

Los componentes del servidor pueden interactuar directamente con APIs, microservicios y bases de datos, y no incluyen código que maneje la interacción del usuario. Los componentes del cliente, por otro lado, se utilizan para manejar estados e interacciones directas con las APIs del navegador.

Las limitaciones incluyen la incapacidad de utilizar almacenamiento local, Bluetooth, WebUSB, y APIs del navegador. No están diseñados para manejar el estado del usuario o realizar interacciones dinámicas como lo haría un componente del cliente.

El futuro de los componentes del servidor de React incluye mejoras en la sincronización del estado entre el cliente y el servidor, la habilidad de realizar mutaciones de datos basadas en la información del cliente y optimizaciones en la actualización de la UI sin necesidad de refrescar toda la página.

Pillippa Pérez Pons
Pillippa Pérez Pons
16 min
15 Nov, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Bienvenido a los componentes del servidor al rescate, turboalimentando y potenciando tu aplicación React con estilo. Los componentes del servidor React se introdujeron hace tres años, proporcionando una solución fácil de mantener y rápida de construir con métricas mejoradas y experiencia de usuario. Al usar la renderización del lado del servidor, no es necesario descargar código al cliente al inicio. Los componentes del servidor reducen el costo de las atracciones y proporcionan una solución unificada. El futuro de los componentes del servidor React incluye la mejora de la sincronización del estado, permitiendo que los componentes del servidor se vuelvan a renderizar en respuesta a los cambios de estado, y habilitando actualizaciones de UI fluidas sin refresco de página.

1. Introducción a los Componentes del Servidor de React

Short description:

Bienvenidos a los componentes del servidor al rescate, turbo cargando y potenciando su aplicación de React con estilo. Los componentes del servidor de React fueron introducidos hace tres años, proporcionando una solución fácil de mantener y rápida de construir con métricas mejoradas y experiencia de usuario. Al usar la renderización del lado del servidor, no hay necesidad de descargar código al cliente al inicio.

Bienvenidos a los componentes del servidor al rescate, turbo cargando y potenciando su aplicación de React con estilo. ¿Quién soy? Soy Phillipa Perez Ponce, soy ingeniera de software y frontend lockads y compartición de volumen. Y hoy me gustaría hablar sobre los componentes del servidor de React.

Antes de eso, hace casi tres años, especialmente el 21 de diciembre de 2020, el equipo de React nos presentó por primera vez los componentes del servidor de React. Antes de eso, conocíamos la interacción entre servidor y cliente. Como tenemos los datos en el servidor, tenemos las interacciones de la interfaz de usuario en el cliente. Así que, empezamos a usar la renderización del lado del cliente, y la renderización del lado del cliente es así. Tenemos un servidor, tenemos un dispositivo, y le preguntamos al servidor sobre la página. Y HTML, pedimos el paquete, y JavaScript, CSS, devuelve el paquete. Y vimos el paquete, hicimos todas las cosas, y pedimos los datos. Y devuelve los datos. Y terminamos en render la página. Esto parece nuestro primer pintado, nuestras interacciones de página. Está bien. Nuestro contenido completo, pintado completo. No es tan bueno. Es un poco realmente caro. Nuestras métricas no son buenas. Nuestros usuarios no tienen una buena experiencia. Sufren. Nosotros sufrimos. Nuestro pintado aumenta. Así que probamos diferentes herramientas, diferentes arquitecturas, diferentes renderizaciones. ¿Para qué? Para evitar esto para tratar de tener mejores métricas, para tratar de tener una mejor, mejor experiencia. Mejor experiencia de usuario. Así que ese día, los componentes del servidor de React nos trajeron con una idea, tres ideas. Fácil de mantener, rápido de construir, métricas mejoradas, mejorada experiencia de usuario. Y puedes usarlo en tu renderización favorita. ¿Y cuáles son los beneficios? ¿Por qué estás usando eso para estas tres ideas solamente? No, estamos usando esto porque tiene una mejor ventaja. Como estamos usando el servidor,

Read also

2. Introducción a los Componentes del Servidor de React - Parte 2

Short description:

También puedes aplicar formato a los datos. Acceso completo al backend. Propagación automática con menos código. La cascada del servidor no cliente elimina la necesidad de solicitudes separadas. Los componentes del servidor reducen el costo de las atracciones y proporcionan una solución unificada. Los componentes del servidor de React consisten en componentes del cliente y del servidor.

no hay código que necesites descargar al cliente al inicio. Así también puedes aplicar un formato en los data. Puedes dar formato a los data, cadena, fecha. ¿Qué sigue? Acceso completo al backend. Como estás usando el servidor, puedes usar microservicio, puedes usar el sistema de archivos, puedes usar la database sin costo para el tiempo de inicio. Propagación automática. Esto es porque, anteriormente, usábamos la importación perezosa, usábamos la importación dinámica, y, ahora, lo único que necesitas hacer es importar Lala de Lala, ¡y voila! Lo haces automáticamente, y sin mucho código. Incluso con menos código.

¡Cascada de servidor no cliente! Esto es porque eliminamos el tipo incorrecto. Entonces, tienes esto que está bien. Tienes el HTML. Tienes el paquete. Ve al paquete y ve con los data. Entonces, entonces, esta vez, construye la cosa y construye la página. Entonces, no tienes esto, está bien, necesito el paquete. Necesito los data. Y lo tienes todo en una sola solicitud.

Evita las tareas de atracción. Esto es porque los componentes del servidor reducen el costo de las atracciones. Puedes poner toda la lógica, la lógica del producto en el servidor, y puedes tener varias capas de las atracciones. Y esto solo lleva al cliente que todos estos elementos de renderizado para el cliente están listos. Así que la vista es más agradable y agradable de tener de una manera que tienes solo ese renderizado puro. Y el mismo desafío en Soluciones Unificadas, tienes el mismo código para solución. Tienes el mismo código para en el servidor, tienes el mismo código en el cliente. Así que no necesitas tener un lenguaje diferente para el servidor y para el cliente. Puedes tener todo en un solo lugar. Primero, hablamos sobre nuestros React Server components. Hablamos sobre los beneficios, y ahora ¿quién es React Server components? Tenemos componentes del cliente que viven en los clientes, viven en el navegador. Y tenemos los componentes del servidor, que viven en los servidores. Esta es nuestra primera parte de la situación en los Componentes del Servidor de React, nuestros React components y componentes del cliente.

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 2023React Advanced 2023
27 min
Simplificando los Componentes del Servidor
Top Content
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.
Explorando los fundamentos de los Componentes del Servidor React
React Day Berlin 2023React Day Berlin 2023
21 min
Explorando los fundamentos de los Componentes del Servidor React
Top Content
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.
Y Ahora Entiendes los Componentes del Servidor React
React Summit 2024React Summit 2024
27 min
Y Ahora Entiendes los Componentes del Servidor React
Top Content
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.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced 2023React Advanced 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
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.
Componentes del Servidor: La Épica Historia de Renderizar UX
React Summit 2023React Summit 2023
26 min
Componentes del Servidor: La Épica Historia de Renderizar UX
Top Content
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.
RSCs en Producción: 1 Año Después
React Summit 2024React Summit 2024
24 min
RSCs en Producción: 1 Año Después
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.

Workshops on related topic

Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
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
La Puerta al Backend: Guía del Desarrollador Frontend para el Desarrollo Full-Stack
React Summit US 2023React Summit US 2023
160 min
La Puerta al Backend: Guía del Desarrollador Frontend para el Desarrollo Full-Stack
Top Content
WorkshopFree
Amy Dutton
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.
Patrones Avanzados de Despliegue de Aplicaciones con Componentes de Servidor React (feat. un Marco RSC DIY)
React Summit US 2023React 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
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.
Construyendo Componentes de Servidor Reutilizables en NextJS
React Summit US 2023React Summit US 2023
88 min
Construyendo Componentes de Servidor Reutilizables en NextJS
Workshop
Will Bishop
Mettin Parzinski
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
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
React Day Berlin 2023React 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
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
Construye una Tienda Personalizada en Shopify con Hydrogen
React Advanced 2021React Advanced 2021
170 min
Construye una Tienda Personalizada en Shopify con Hydrogen
Workshop
Matt Seccafien
Cathryn Griffiths
2 authors
Hydrogen es un marco de trabajo y SDK React con opiniones para construir tiendas personalizadas rápidas, alimentadas por Shopify. Hydrogen adopta los Componentes del Servidor React y utiliza Vite y Tailwind CSS. En este masterclass, los participantes tendrán una primera vista de Hydrogen, aprenderán cómo y cuándo usarlo, todo mientras construyen una tienda personalizada completamente funcional con el equipo de Hydrogen.