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!

16 min
15 Nov, 2023

AI Generated Video Summary

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,

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.

3. Componentes del Servidor de React: Servidor vs Cliente

Short description:

Tu padre te definió. Usando los Componentes del Servidor de React, un componente del servidor puede tener componentes del servidor o del cliente. Un componente del cliente solo puede tener componentes del cliente. Los componentes del servidor se definen usando 'useServer', mientras que los componentes del cliente se definen usando 'useClient'. Los componentes del servidor pueden interactuar con APIs, servidores, microservicios y bases de datos, mientras que los componentes del cliente pueden usar el estado, los efectos e interactuar con las APIs del navegador.

Esta es una nota. Tu padre te definió. Eso significa que usando los React Server components, un componente del servidor puede tener opciones que son componentes del servidor o del cliente. Y un componente del cliente solo puede tener componentes del cliente.

Podemos ver en el siguiente ejemplo. Tenemos en azul el componente del servidor. Tenemos naranja, los componentes del cliente. Y aquí tenemos un icono, tenemos un switch, tenemos entradas, y tenemos un lavado. Así que primero, cubriremos los componentes del servidor. Y después de eso, cubriremos los componentes del cliente. Los componentes del cliente, si vamos a la página, podemos ver aquí que tenemos un componente del servidor, que puedes usar, usa el servidor para definir eso. En cada componente del servidor, verás el uso del servidor. Estás expresando que es un componente del servidor. Esta es la forma en que lo pones y dices que es un componente del servidor. Aquí también es un componente del servidor e imagen. La imagen es un componente del servidor. También, aquí, el switch es un use client. Para el componente del servidor, usamos use server. Para el cliente componente, usamos use client. Si volvemos a la página, la entrada también es un cliente, use client. Y el componente del servidor es use server. Así que esto también es un use server.

Entonces, en ese caso, ¿cuál es la diferencia entre el componente del servidor y el componente del cliente? No es solo que estás usando este use server, use client. En use servers, puedes interactuar con la otra API, otro servidor, otros microservices, database. Y para nuestros clientes, tenemos un user state. Tenemos un user first quizás. Y podemos interactuar con toda la forma interactiva de la página. Podemos ver los eventos. Podemos ver, por ejemplo, en otro ejercicio que tenemos en switch, podemos interactuar con el documento. Entonces, la principal diferencia si estás usando state, use effects, o puedes interactuar con la browser API, necesitas usar el use client. Necesitas poner eso como un componente del cliente, porque estás interactuando con la API del navegador.

4. Componentes del Servidor de React: Envoltorios e Impacto

Short description:

Nuestros componentes de servidor son envoltorios que pueden tener componentes de cliente y de servidor. El uso de los componentes del servidor de React impacta en las métricas, reduciendo el tiempo de construcción de la interfaz de usuario y mejorando el rendimiento. Sin embargo, existen limitaciones, como no poder usar el almacenamiento local, Bluetooth o las APIs del navegador. El futuro de los componentes del servidor de React incluye mejorar 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 fluidas de la interfaz de usuario sin refrescar la página.

Nuestros componentos de servidor son diferentes. Nuestros componentes de servidor son envoltorios. En ese caso, por ejemplo, la definición de la palabra es solo un analizador de la información. Y trae con un componente aislado al servidor, al cliente. Este es el primer paso. Vemos que tenemos un componente de servidor que puede tener componentes de cliente y de servidor. Pero si tienes un padre que es un componente de cliente, solo puedes tener componentes de cliente como hijos. Aquí está el ejemplo. Tenemos nuestro interruptor, tenemos nuestra definición, tenemos nuestra entrada. Continuamos.

Entonces, aquí estamos en nuestro ejemplo. Esta forma en que usamos el componente del servidor de React, que estamos usando React server components, impacta nuestras métricas. Aquí está el mismo código, es el mismo valor, es un paquete, tienes en la primera pintura de contenido la misma métrica. En tiempo para interrumpir, tienes eso, es el mismo tiempo, porque pasas el mismo tiempo para construir todos los componentes y construir toda la interfaz de usuario. Y nuestro pintor de contenido grande, que era tan excesivo. Aproximadamente tres segundos, hacemos una gran disminución. Un segundo. Mucho. Y esto es porque no tenemos esta ronda de trato porque estamos pidiendo la información en el servidor, analizamos la información y traemos la información, la interfaz de usuario al cliente lista. Esto evita la ronda de trato, esto evita la cascada.

Tenemos limitaciones con el componente del servidor de React, tenemos almacenamiento local porque no podemos usar el almacenamiento local. No podemos usar el Bluetooth en el componente del servidor porque estamos en el servidor. No podemos usar el web-use CV. No podemos usar un estado, usar una grasa, usar un reductor. Porque no podemos usar varias cosas. No podemos usar la API del navegador, no podemos usar los interactivos. ¿Cuál es el futuro para el componente del servidor de React? Como se dice en la publicación de marzo de 2020, 2023, estas capacidades de interacción funcional entre el servidor y el cliente, esto es una de las cosas. Esto es una cosa que incluye mejorar la sincronización del estado entre el servidor y el cliente. Enviando datos del cliente al servidor para ejecutar la mutación de datos tal vez, y alguna mejora en la fórmula. La otra cosa es permitir al componente del servidor hacer un re-renderizado en respuesta a los cambios de estado. Tal vez mantener el lado del cliente interactuado y permitir actualizaciones fluidas de la interfaz de usuario sin refrescar toda la página. Estas son algunas características, y si quieres ver y te sientes más curioso acerca del código, puedes hacer una inspección en ese repositorio, y si tienes algunas dudas, puedes contactarme en Twitter. Gracias.

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

React Advanced Conference 2023React Advanced Conference 2023
27 min
Simplifying Server Components
Server Components are arguably the biggest change to React since its initial release but many of us in the community have struggled to get a handle on them. In this talk we'll try to break down the different moving parts so that you have a good understanding of what's going on under the hood, and explore the line between React and the frameworks that are built upon it.
React Day Berlin 2023React Day Berlin 2023
21 min
Exploring React Server Component Fundamentals
I've been developing a minimalistic framework for React Server Components (RSC). This talk will share my journey to deeply understand RSC from a technical perspective. I'll demonstrate how RSC features operate at a low level and provide insights into what RSC offers at its core. By the end, you should have a stronger mental model of React Server Components fundamentals.
React Summit 2023React Summit 2023
26 min
Server Components: The Epic Tale of Rendering UX
Server components, introduced in React v18 end these shortcomings, enabling rendering React components fully on the server, into an intermediate abstraction format without needing to add to the JavaScript bundle. This talk aims to cover the following points:1. A fun story of how we needed CSR and how SSR started to take its place2. What are server components and what benefits did they bring like 0 javascript bundle size3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what4. My take on how rendering UI will change with this approach
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Server Components are the hot new thing, but so far much of the discourse around them has been abstract. Let's change that. This talk will focus on the practical side of things, providing a roadmap to navigate the migration journey. Starting from an app using the older Next.js pages router and React Query, we’ll break this journey down into a set of actionable, incremental steps, stopping only when we have something shippable that’s clearly superior to what we began with. We’ll also discuss next steps and strategies for gradually embracing more aspects of this transformative paradigm.
React Day Berlin 2023React Day Berlin 2023
27 min
React Server Components
React Server Components are a newer way of working with React that is widely adopted in frameworks like Next.js. In this talk, we will look under the surface of how they work and are executed on the server side, and how they fit with server rendering and traditional React apps.

Workshops on related topic

React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Advanced Conference 2023React Advanced Conference 2023
153 min
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
Workshop
Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications.
Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects.
Throughout the workshop, we'll cover essential topics, including:
- Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components
Workshop level: 
No matter your current level of React expertise, this workshop will equip you with the knowledge and tools to take your web development game to new heights. Don't miss this opportunity to stay ahead of the curve and master the cutting-edge technology that's changing the face of web development. Sign up now and unleash the full power of React Server Components!
React Advanced Conference 2021React Advanced Conference 2021
170 min
Build a Custom Storefront on Shopify with Hydrogen
Workshop
Hydrogen is an opinionated React framework and SDK for building fast, custom storefronts powered Shopify. Hydrogen embraces React Server Components and makes use of Vite and Tailwind CSS. In this workshop participants will get a first look at Hydrogen, learn how and when to use it, all while building a fully functional custom storefront with the Hydrogen team themselves.
React Advanced Conference 2022React Advanced Conference 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.