Mejores prácticas para obtener datos en Next.js

La obtención eficiente de datos es clave para crear una experiencia de usuario fluida y rápida en las aplicaciones de Next.js.

En este artículo, vamos a explorar cómo nuestro equipo de desarrollo aprendió a optimizar la obtención de datos en Next.js mediante el uso de componentes del servidor para la carga inicial de datos y componentes del cliente para gestionar la interactividad.

Compartiremos algunas de las mejores prácticas para crear hooks personalizados que optimizan el código y reducen redundancias, brindando una sólida estrategia que mejora tanto el rendimiento como la experiencia de desarrollo.

¿Cuándo usar componentes del servidor vs. componentes del cliente en Next.js?

Una de las decisiones principales al trabajar en Next.js es determinar cuándo usar componentes del servidor y cuándo optar por componentes del cliente. Las reglas generales que seguimos son las siguientes:

• Componentes del servidor: son ideales para contenido estático o datos que no cambian con la interacción del usuario. Al ejecutarse en el servidor, ofrecen una carga rápida y optimizan el rendimiento general de la página.
• Componentes del cliente: son ideales cuando se requiere interactividad en tiempo real, como con formularios que presentan validación inmediata, filtros dinámicos y gráficos interactivos.

Mejores prácticas para la optimización del rendimiento en Next.js

En un proyecto reciente para un cliente que gestiona un sitio en Storyblok con numerosos blogs y filtros, optamos por una estrategia híbrida.

Utilizamos componentes del servidor para la obtención inicial de datos, mejorando tanto el SEO como el TTFB (Tiempo hasta el primer byte) para proporcionar una carga inicial rápida.

Luego, transferimos estos datos a un componente del cliente que gestionaba la interactividad y los filtros en tiempo real.

Esta estrategia híbrida nos permitió ofrecer una experiencia de usuario fluida sin comprometer el rendimiento.

En base a esta experiencia, nos dimos cuenta de que las estrategias de obtención de datos en Next.js dependen de la comprensión del contenido y los endpoints requeridos.

Aquí están algunas prácticas clave que han sido efectivas para nuestro equipo:

Estrategias de caché en componentes del servidor

Hay tres opciones principales para manejar el caché en Next.js:

• force-cache. Almacena los datos en caché indefinidamente. Ideal para datos que rara vez o nunca cambian.
• no-store. Desactiva el almacenamiento en caché, haciendo que cada llamada a la API se realice en tiempo real.
• next.revalidate. Establece una ventana de tiempo para revalidar el caché. Útil para datos que requieren actualizaciones periódicas.

Seleccionamos la estrategia de caché más adecuada dependiendo de la naturaleza del contenido. Encontramos next.revalidate particularmente útil para contenido que cambia frecuentemente, ya que equilibra el rendimiento con la provisión de datos actualizados.

Regeneración Estática Incremental (ISR)

Para páginas que son mayormente estáticas, usamos ISR con getStaticProps, lo que permite que las páginas se regeneren de manera incremental sin necesidad de un nuevo deployment. Esta técnica es útil para contenido como blogs o páginas de productos que se actualizan ocasionalmente.

Usamos Hooks Personalizados para Estandarizar la Obtención de Datos

Para evitar redundancias y mejorar la consistencia, desarrollamos hooks personalizados para facilitar la obtención de datos.

Un ejemplo es un hook reutilizable que recibe el endpoint y otras propiedades, como la cantidad de ítems a obtener. Este patrón ayuda a reducir el código repetitivo y simplifica la configuración de la obtención de datos a lo largo de los diferentes módulos de la aplicación.

Este enfoque ahorra tiempo al equipo y minimiza errores, ya que podemos gestionar cualquier ajuste a la estrategia de obtención de datos desde un único punto. Además, los hooks permiten a los desarrolladores centrarse en la lógica de negocio sin preocuparse por detalles técnicos repetitivos.

Cómo Aprender Cuándo Usar Componentes del Servidor o del Cliente Impactó Nuestra Eficiencia

Aprender cuándo utilizar componentes del servidor o del cliente mejoró significativamente la eficiencia de nuestros esfuerzos de desarrollo y el rendimiento de nuestra aplicación. Algunos de los beneficios incluyen:

• Separación de responsabilidades. Los componentes del servidor manejan la lógica backend, mientras que los componentes del cliente gestionan la interactividad. Esta división hace que el código sea más modular y fácil de mantener.
• Reducción de la carga de JavaScript del lado del cliente. Usar componentes del servidor reduce la cantidad de JavaScript necesario en el lado del cliente, mejorando los tiempos de carga y el rendimiento de la página. Esto es efectivo para aplicaciones con alto tráfico.
• Optimización del SEO y los tiempos de carga. Pre-renderizar datos en componentes del servidor mejora la experiencia del usuario y potencia el SEO, ya que los motores de búsqueda pueden indexar el contenido sin depender de JavaScript.

El cliente quedó satisfecho con los resultados, ya que el sitio mantuvo la interactividad mientras soportaba altos volúmenes de tráfico sin sacrificar la velocidad de carga.

¿Qué Aprendimos de Nuestra Experiencia Obteniendo Datos con Next.js?

Aprendimos que una estrategia efectiva de obtención de datos al trabajar con Next.js en Storyblok presenta algunos desafíos. Uno de los mayores obstáculos fue integrar Next.js con Storyblok mientras usábamos componentes del servidor.

Storyblok proporciona una integración que incluye edición en vivo, lo que requiere usar un Proveedor como componente del cliente, haciendo que todos los componentes bajo su jerarquía actúen también como componentes del cliente.

Esto limitó nuestro uso de componentes del servidor y requirió ajustes adicionales para mantener el desempeño deseado sin comprometer la experiencia de edición en vivo.

A pesar de los desafíos, aprender a usar apropiadamente componentes del servidor y del cliente en Next.js ha sido una estrategia poderosa para mejorar tanto el rendimiento como la eficiencia del desarrollo.

Tener un enfoque estructurado para la obtención de datos y usar hooks personalizados nos ayuda a mantener un código limpio y optimizado, y a entregar resultados sobresalientes a los clientes tanto en interactividad como en velocidad de carga.

Como agencia dedicada a superar los límites de lo que podemos hacer para proporcionar mejores resultados a los clientes, constantemente buscamos maneras de aprender y adoptar la estrategia más efectiva para cada proyecto.

Si encontraste útil este post, leé nuestro blog y recursos para desarrolladores para más ideas y guías.