Refactorización de componentes en Next.js usando React Server Components

Explorar las capacidades avanzadas de React Server Components en Next.js nos permite no solo optimizar el rendimiento de nuestras aplicaciones, sino también aprovechar mejor las ventajas que este framework ofrece al trabajar directamente con bases de datos y datos asincrónicos. Este enfoque refuerza la experiencia del usuario desde el primer render.

¿Qué son los React Server Components y por qué son relevantes?

• Son una funcionalidad avanzada desarrollada en colaboración con Facebook y Next.js.
• Permiten que ciertos componentes sean renderizados en el servidor, enviando contenido estático optimizado al cliente.
• Mejoran el rendimiento y la indexación SEO, ya que los datos llegan completos al primer render del navegador.

¿Cómo identificar un componente cliente en Next.js?

• Un componente cliente se puede reconocer por el uso de hooks como useEffect y useState.
• Los datos en este caso son cargados dinámicamente desde el cliente, no desde el servidor.
• La revisión de la pestaña "Network" en el navegador muestra que el HTML inicial no contiene los datos renderizados.

¿Cómo refactorizar un componente cliente a servidor?

1. Transformar el componente en una función asíncrona:
   • Eliminar useEffect y useState.
   • Usar await para obtener los datos directamente desde la API o base de datos.
2. Definir rutas absolutas para el fetch:
   • Asegurarse de usar la ruta completa del servidor (por ejemplo, http://localhost:3000/api/...).
3. Ajustar los tipos con TypeScript:
   • Usar inferencia de tipos para garantizar consistencia en los datos.
4. Probar la funcionalidad:
   • Confirmar que el HTML inicial contiene todos los datos, optimizando así el render inicial y la experiencia del usuario.

¿Qué beneficios aporta esta optimización?

• Mejora en rendimiento:
  • Datos precargados en el HTML inicial.
  • Menos dependencias de JavaScript en el cliente.
• SEO mejorado:
  • Los motores de búsqueda indexan contenido completo desde el primer render.
• Experiencia de usuario optimizada:
  • Los usuarios reciben información inmediata sin depender de llamadas adicionales al servidor.

¿Qué tecnologías complementan este flujo?

• Base de datos: Postgres:
  • Se utiliza junto con un ORM como Drizzle para gestionar la capa de datos.
• Setup del proyecto:
  • Next.js en su última versión, TypeScript, Tailwind CSS, Prettier y TurboPack.
• Herramientas auxiliares:
  • Scripts automatizados para prellenar la base de datos y facilitar el desarrollo.

¿Cómo garantizar la funcionalidad?

• Verificar el contenido inicial en el HTML para confirmar que los datos vienen desde el servidor.
• Usar herramientas como PG Web para monitorizar los datos cargados en la base de datos.
• Configurar correctamente las dependencias para evitar errores comunes.