React Server Components en Next.js: notación "use Client"

Muy buena explicación en general, pero el primer ejemplo de renderizar un server component dentro de un client component si funcionó, esto es porque el componente **página** (server) es pasado como children al **layout** (client) y next permite hacer esto. Lo que no permite es **importar** directamente un server component dentro de un client component. En conclusión, se puede renderizar un server component dentro de un client component siempre que sea pasado como prop al client component. Fuente: <https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#unsupported-pattern-importing-server-components-into-client-components>

Me estaba dando un error al ubicar el Header fuera del body en el RootLayout, al colocarlo por debajo de body se soluciono, por si les pasa.

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.

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.

<h5>Static Rendering</h5>

- 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.

<h5>Dynamic Rendering</h5>

- 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.

<h5>Streaming</h5>

- 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

Al 2/04/2024 el \<Header /> lo tuve que poner dentro del body sobre {children} para que no me de errores.

Yo tengo el siguiente principio para escoger entre server y client components Todos los componentes son del lado del servidor excepto los que requieran interacción, consumir una API del navegador, animaciones o ese tipo de cosas


Algo que he aprendido al optimizar apps con caché en servidor (backend), es que cuando un componente usa datos directos del usuario, es mejor dejarlo como 'client component'. Esos requests siempre tardan más (van hasta el origin y no pueden cacheados en masa). Para el resto, caché a tope. 🚀

esta es de las cosas más importantes y comunes al desarrollar con next!

Me sale este error al usar el alias Cannot find module 'app/components/Header' or its corresponding type declarations.

Creo que los archivos proxy que mencionas yo los conocía como barrel files, si bien sirven muy bien para organizar varios imports de un componente, tienen un asunto en el performance al construir el grafo de dependencias cuando se hace le build de los archivos o tests, caso contrario a lo que mencionas prefiero definir el componente en el index tsx y hacer los import explícitos que se requieran. Un poco mas detallado lo que menciono viene explicado en el siguiente enlace <https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-7/> 

La desventaja que veo de la atomicidad de Nextjs es que genera una cantidad grande de componentes y por ende de archivos y en proyectos grandes se vuelve tedioso.