Uso de React Server Components en Next.js: Cliente vs Servidor

Contenido del curso

Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

Next.js Avanzado

Autenticación y autorización

Inteligencia Artificial

Performance

Frontend Ops

Next.js es parte de tu nuevo stack

57
Next.js: Backend y Frontend con React Server Components
01:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:21

Uso de React Server Components en Next.js: Cliente vs Servidor

Curso de Next.js 14

Clase 8 de 57

Clase 8 / 57

Recursos

Next.js y sus componentes server-side representan un salto significativo hacia una web más eficiente y rápida. La implementación de React Server Components en Next.js ha abierto un abanico de posibilidades donde el rendimiento y la experiencia del usuario se ven potencialmente mejorados. Así, entender el funcionamiento de estos componentes y cómo diferenciarlos de los componentes tradicionales resulta fundamental para sacarles el máximo provecho. Profundicemos en el uso de los Server y Client Components dentro de Next.js y cómo pueden transformar el desarrollo de aplicaciones web.

¿Qué son los React server components?

Los React Server Components representan una evolución significativa en la forma en que se renderizan y sirven las aplicaciones de React. Estos componentes permiten enviar al cliente una estructura HTML sin JavaScript innecesario desde el servidor, lo que reduce considerablemente la carga y mejora el rendimiento.

¿Cómo diferenciar entre componentes de servidor y de cliente?

En el ecosistema de Next.js, es crucial aprender a distinguir entre componentes de servidor y de cliente:

Componentes de servidor: Son generalmente presentacionales y no manejan estados o dinamismo excesivo. Se envían desde el servidor y son ideales para mostrar contenido estático.
Componentes de cliente: Están diseñados para ser dinámicos y manejar estados o efectos. Requieren JavaScript y son necesarios para acciones interactivas o para acceder a APIs del navegador.

¿Cuándo usar la notación de useClient?

La notación useClient transforma un componente server-side en un client component. Este es un cambio significativo ya que al utilizar esta anotación:

Todos los componentes anidados automáticamente se convierten en componentes de cliente.
Se pueden implementar funcionalidades que requieran uso de APIs de navegador o manejo de estado.

Organización de componentes en Next.js

Estructurar adecuadamente los componentes es clave para mantener un proyecto claro y manejable. Por ejemplo:

Separar componentes lógicos en directorios correspondientes.
Utilizar componentes proxy para exportaciones limpias y directas.
Importar componentes de manera organizada para mantener el código eficiente y legible.

Consejos para utilizar componentes de servidor y de cliente

Reserve componentes de servidor para elementos presentacionales que no requieren interacción o estado.
Utilice componentes de cliente para elementos que necesitan interactividad, estado o acceso a APIs del navegador.

Importancia de la jerarquía en componentes

La jerarquía en los componentes de Next.js es fundamental:

Comience con componentes de servidor en lo alto de la jerarquía.
Convierta a componentes de cliente solo aquellos necesarios y en el último nivel posible para no sacrificar el rendimiento.

Al comprender y aplicar correctamente los React Server Components, los desarrolladores pueden optimizar considerablemente el rendimiento de sus aplicaciones web, ofreciendo una experiencia de usuario más ágil y satisfactoria. En Next.js, estos componentes no solo mejoran la eficiencia, sino que representan una forma moderna y avanzada de construir y estructurar proyectos web. Continúa aprendiendo y experimentando con estas herramientas para elevar tus habilidades de desarrollo al siguiente nivel y crear aplicaciones web que destaquen por su rapidez y eficacia.

Xavier Flores

Hace 3 años

CLASE8 02/03/2024 RENDERING - SERVER Y CLIENT COMPONENTS

Para entender plenamente este tema debemos estar familiarizados con estos tres conceptos:

Enviroments

El codigo puede ser ejecutado tanto en el lado del server y cliente. !renders

Por cliente se refiere: lo que el navegador solicita a traves del dispositivo del usuario y el server responde con una interface de usuario. Por server: a la PC que almacena nuestro codigo de la aplicacion, la pc recibe una solicitud desde el cliente y este envía una respuesta.

Request-Response Lifecycle

Inicia cuando un usuario visita o interactua con la aplicación. En resumen el usuario interactura con la app, el cliente envía solicitudes http, llegan al server, este las procesa y reponde con recursos de HTML, CSS, JS, etc, esto se renderiza al cliente.

Network Boundary

separa el codigo de server y del cliente. Con las convenciones "use client" y "use server" podemos definir nuestras fronteras. Si necesitas acceder al servidor desde el cliente, envías una nueva petición al servidor en lugar de reutilizar la misma petición. Esto facilita la comprensión de dónde renderizar sus componentes y dónde colocar el Límite de Red.

SERVER COMPONENTS

Por defecto Next usa Server Components. los react server components permiten escribir UI que puede ser renderizado y cacheado en el servidor. Existen 3 estrategias de server rendering:

Los beneficios pueden ser: - Data Fetching:al tener tu codigo viviendo dentro del server y a lado de un posible data store, esto hace que se reduzcan los tiempos del fetch para realizar el renderizado.
- Seguridad: Mantiene los datos y la logica del server seguros, evitando exponerlos al cliente. - Cacheo: luego del renderizado, esta informacion se puede guardar y ser utilizada posteriormente. - Bundles Sizes: podemos tener dependencias "precargadas" lista, evitando que el cliente use mas data de los necesario. - Carga de la pagina inicial: El server genera html que permite al usuario visualizar la pagina inmediatamente. - SEO y SNS: ayuda a los bots generar visualizaciones de la pagina. - Streaming: facilita la visualizacion de pequeños bloques de la pagina, hasta que se carge toda.

Static Rendering

- Las rutas son renderizadas en build time, los resultados pueden ser cacheados y empujados a un CDN.
- Es util cuando una ruta tiene data que no es personalizada para el usuario, como un blog o pagina de producto.

Dynamic Rendering

- Las rutas son renderizadas por cada usuario en cada request.
- Es util cuando una ruta tiene data que si es personalizada hacia el usuario, como cookies o searchParams.
- El uso de las funciones de cookies(), headers() y searchParams hacen que sea automaticamente un render dinámico en toda la ruta.

Streaming

- Habilita que progresivamente veamos UI desde el servidor, diviendolo en pequeños trozos y enviandolo por diferentes canales o "stream/buffers"
- El streaming está integrado por defecto en Next.js App Router. Esto ayuda a mejorar tanto el rendimiento inicial de carga de la página, así como la interfaz de usuario que depende de la obtención de datos más lentos que bloquearían la representación de toda la ruta. Por ejemplo, las reseñas en una página de producto.
- Para empezar a usar streaming route segments se puede utilizar Loading.tsx

CLIENT COMPONENTS

Permite escribir UI interactivos que pueden ser renderizados en el lado del cliente al momento de la solicitud. ¿Cuando usarlos? - Cuando se usen hooks com useState, effects y event listeners. - Cuando se requiera usar Browser API. Se puede usarlo colocando la directiva de "use client" en el archivo deseado, lo que convertida a todos los archivos que se deriven en el como client components.

COMPOSICION DE PATRONES

Sebastian Ardila

Hace 3 años

Gracias Xavier, esto me ayudo a entender cuando vi la imagen comparativa el por que los componentes que solo muestran informacion es mas recomendable renderizarlos del lado del servidor

Xavier Flores

Hace 3 años

es muy confuso al comienzo, pero de poco se va entendiendo, en clases posteriores veremos el render server component vs render client component, en cual terminaras de aterrizar tus ideas de estas definiciones.

Comentarios (24)24 comentarios

Fabián Oswaldo Montoya Palma

Andres Gallego

CRM Consultores Asociados

Hace 2 años

Bethsy Falcon

Juan Pino

Javier Damiani

Julian Sosa

Fahibram Cárcamo Cárcamo

Angel Genis

Juan Camilo Noreña López

Pablo Martin ZULIAN

Hace 4 meses

Gildder Guerrero Ramirez

Hace un año

Guillermo Prituluk

ANDREA MAYERLI FRANCO GARCIA

Platzi

Alejandro Brand

Emanuel Zarazaga

Jeferson Camilo Grueso Barrera

Jose Tellez

Mariangelica Useche

Team Platzi

Jose Luis Bedoya

Wilberk Ledezma

Conceptos básicos de Next.js 14

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados

Creación de Proyectos Next.js con TypeScript y App Router

Creación de Tienda Online con NextGIS y Shopify

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico

Implementación de Layouts en Next.js: Globales y Locales

Navegación Optimizada con Next.js Usando el Componente Link

Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica

Uso de React Server Components en Next.js: Cliente vs Servidor

Arquitectura de Componentes para Landing Page en Next.js

Manejo de estilos y estáticos en Next.js 14

Implementación de CSS Modules en Next.js para Estilizar Componentes

Instalación y Configuración de Sass en Next.js

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos

Optimización de Imágenes con Next.js: Uso de Next.Image

Optimización y Responsividad con NextImage en Next.js

Optimización de Fuentes de Google en Next.js con Roboto

Estilos Dinámicos en React con Classnames y useState

Data Fetching en Next.js

Creación de Tienda en Shopify para Desarrollo con Next.js

Creación y uso de variables de entorno en Next.js

Consumo de APIs con Shopify y React Server Components

Implementación de Loader en Next.js para Carga de Productos

Route Grouping en Next.js sin crear segmentos

error.tsx para manejar errores en Next.js

Next.js Avanzado

Manejo de Errores y Páginas 404 en Next.js

React Server Components en Next.js: Renderizado y Optimización

Diferencias entre archivos Template y Layout en Next.js

Arquitectura Escalable para Aplicaciones de Software

Creación de APIs con Next.js y Road Handlers

Configuración y Creación de Colecciones en Shopify

Patrones de Fetching en Next.js: Secuencial y Paralelo

Filtrar productos por colección en Shopify

params y searchParams en Next.js

Implementación de la Vista de Producto en TypeScript y React

Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas

Revalidación de Caché en Next.js: Endpoints por Tag y Path

Redirección en Next.js: Server y Client Components

Creación de un Componente React para Sanitizar HTML

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web

Autenticación y autorización

Implementación de API GraphQL en Shopify para Autenticación Segura

Uso de Server Actions en Next.js para Formularios React

Implementación de Signup con GraphQL y Shopify

Implementación de Cookies de Acceso en Shopify con Next.js

Implementación de Flujo de Login con Tokens y Cookies

Validación de Access Tokens en Next.js con GraphQL y Cookies

Implementación de Carrito de Compras con React Icons

Manejo de estado global con Sustant en Next.js 13

Implementación de Carrito de Compras en JavaScript y CSS

Checkout de Shopify sin errores de hidratación

Implementación de Middlewares en Next.js para Control de Acceso

Inteligencia Artificial

Implementación de Chatbots con Next.js y Vercel AI SDK

Creación de un Chatbot de Ventas con Personalidad y Contexto

Performance

Implementación de Parallel Routing en Next.js para Cargas Independientes

Analiza tu bundle en Next.js con Bundle Analyzer

Frontend Ops

"Implementación del Edge Runtime en Next.js"

Despliegue de Aplicaciones NxJS en Vercel

Arquitectura de Proyectos Next.js para Entornos Empresariales

Next.js es parte de tu nuevo stack

Next.js: Backend y Frontend con React Server Components

Uso de React Server Components en Next.js: Cliente vs Servidor