En este capítulo, nos enfocaremos en cómo obtener datos en una aplicación Next.js utilizando el Page Router. Next.js ofrece diferentes formas de manejar el data fetching dependiendo de las necesidades de la aplicación, como Server-Side Rendering (SSR), Static Site Generation (SSG), y el renderizado del lado del cliente (CSR).

Server-Side Rendering (SSR) con getServerSideProps

La función getServerSideProps es útil cuando necesitamos obtener datos en cada solicitud de página, directamente desde el servidor. Esto asegura que los datos siempre estén actualizados y disponibles antes de que la página se envíe al cliente.

Ejemplo de SSR

javascript

El uso de SSR es ideal cuando los datos cambian frecuentemente o son específicos para el usuario que realiza la solicitud.

Static Site Generation (SSG) con getStaticProps

Para páginas que no cambian con frecuencia, podemos utilizar Static Site Generation (SSG), lo que permite generar las páginas de manera estática en el momento de la compilación. Esto mejora la velocidad de carga al evitar obtener datos en cada solicitud.

Ejemplo de SSG

javascript

El uso de SSG con Incremental Static Regeneration (ISR) permite regenerar las páginas estáticas a intervalos de tiempo definidos, manteniendo un equilibrio entre velocidad de carga y datos actualizados.

Client-Side Rendering (CSR)

Cuando necesitamos obtener datos dinámicos en el cliente, podemos utilizar Client-Side Rendering (CSR). En este enfoque, los datos se obtienen después de que la página se ha renderizado en el cliente, a través de llamadas a APIs desde el navegador.

Ejemplo de CSR

javascript

CSR es ideal para casos donde el contenido de la página depende de las interacciones del usuario y no requiere obtener los datos en el servidor.

Elegir la estrategia de Data Fetching adecuada

• SSR: Utiliza SSR cuando los datos cambian frecuentemente y necesitan estar actualizados en cada solicitud.
• SSG: Utiliza SSG para páginas cuyo contenido no cambia frecuentemente y donde la velocidad de carga es esencial.
• CSR: Utiliza CSR para funcionalidades interactivas que dependen del usuario, como la búsqueda o los filtros de contenido.

En muchos casos, puedes combinar varias estrategias de data fetching dentro de la misma aplicación, utilizando SSR para algunas páginas, SSG para otras, y CSR para funciones interactivas.

Conclusión

El Page Router en Next.js 13 ofrece una gran flexibilidad para manejar el data fetching, permitiéndonos elegir entre SSR, SSG y CSR dependiendo de las necesidades de nuestra aplicación. En este capítulo, hemos visto cómo obtener datos tanto del lado del servidor como del cliente, y cómo optimizar la experiencia del usuario utilizando la estrategia adecuada.