Los server components, es decir, los componentes que se renderizan del lado del servidor, se han convertido en una de las características principales en las nuevas versiones de React, en especial ahora que están implementados por default en frameworks como Next.js
Si bien, en teoría este tipo de componentes se pueden usar en cualquier situación, lo cierto es que es ideal usarlos en los siguientes casos.
Cuándo usarse Server Components
- Extraer datos directamente desde una base de datos y/o servicios del backend
- Si se necesiten ocultar llaves (keys) o información sensible
- Componentes que tengan un gran número de dependencias
Nota: De acuerdo a las buenas prácticas, las páginas dentro del app router page.tsx, deben ser en la mayoría de los casos de tipo server component. Aunque hay casos en los que se requiera el uso de ciertas funcionalidades que sí puedan ser de tipo client, aunque suelen ser más una excepción que la regla.
Cuándo usar Client Components
- Si se necesitan usar hooks como useState, useEffect, etc.
- Cuando se requiera usar APIs del servidor
- Si se requiere manejar el estado de la aplicación desde el cliente, como puede ser el caso de uso sesiones que no usen cookies
Ventajas de los Server Components
Ahora que sabemos en que casos es ideal usar componentes del lado del servidor, vale la pena conocer las ventajas que estos nos otorgan como:
- Mejora los tiempos de carga para el usuario
- Es ideal para contenido optimizado para buscadores (SEO)
- Otorga mayor seguridad al limitar el acceso a zonas sensibles de la aplicación
Conclusión
En forma general, se recomienda usar Server Components siempre que sea posible, ya que otorga mayor eficiencia, estabilidad y seguridad en nuestras aplicaicones.
Los únicos casos en los que se debería usar componentes ‘use client’ es cuando sea necesaria una acción del lado del cliente. Es decir, cuando no sea necesario usar hooks y apis del navegador como localStorage, geolocalización, etc.