En este capítulo, profundizaremos en cómo utilizar Server-Side Rendering (SSR) y Static Site Generation (SSG) en el Page Router de Next.js 13. Estas dos técnicas son esenciales para mejorar el rendimiento y la optimización de nuestras aplicaciones web, permitiéndonos generar contenido dinámico y estático según sea necesario.

¿Qué es Server-Side Rendering (SSR)?

El Server-Side Rendering (SSR) es una técnica en la que las páginas se renderizan en el servidor antes de enviarlas al cliente. Esto garantiza que el contenido esté actualizado y visible inmediatamente para el usuario, lo que mejora tanto el SEO como la experiencia general.

Implementación de SSR con getServerSideProps

La función getServerSideProps es el método utilizado en Next.js para obtener datos en el servidor antes de renderizar la página. Cada vez que un usuario accede a la página, se ejecuta una solicitud al servidor.

javascript

En este ejemplo, los datos del producto se obtienen del servidor cada vez que se accede a la página, lo que garantiza que siempre estén actualizados.

¿Qué es Static Site Generation (SSG)?

El Static Site Generation (SSG) es una técnica en la que las páginas se generan de manera estática durante la compilación de la aplicación. Esto significa que las páginas se crean una vez y luego se sirven de manera rápida a todos los usuarios. Es ideal para contenido que no cambia con frecuencia.

Implementación de SSG con getStaticProps y getStaticPaths

Cuando utilizamos SSG, podemos generar páginas estáticas utilizando las funciones getStaticProps y getStaticPaths. Esto es útil para generar múltiples páginas dinámicas con contenido estático.

javascript

En este caso, las páginas de cada post del blog se generan de forma estática, y se regeneran automáticamente después de un período de tiempo para mantener los datos actualizados.

Elegir entre SSR y SSG

La elección entre SSR y SSG depende de las necesidades de la aplicación:

• SSR: Utiliza SSR cuando necesitas que los datos estén siempre actualizados en cada solicitud, como en páginas personalizadas o donde los datos cambian frecuentemente.

• SSG: Utiliza SSG cuando las páginas tienen contenido que no cambia con frecuencia o cuando la velocidad de carga es prioritaria, como en blogs o sitios de documentación.

Combinando SSR y SSG

En algunos casos, es posible que desees combinar ambas técnicas en una misma aplicación. Por ejemplo, podrías usar SSR para páginas que requieren datos actualizados en tiempo real, como dashboards, y SSG para páginas estáticas como artículos de blog.

Optimización del rendimiento con SSR y SSG

Tanto SSR como SSG mejoran el rendimiento general de la aplicación de diferentes maneras:

• SSR mejora la experiencia del usuario al garantizar que el contenido esté siempre actualizado, pero puede aumentar el tiempo de respuesta en el servidor.

• SSG mejora significativamente la velocidad de carga inicial al servir páginas estáticas, pero requiere regenerar las páginas cuando los datos cambian.

Mejorando la experiencia del usuario

Al combinar SSR y SSG, podemos ofrecer una experiencia de usuario rápida y fluida. Por ejemplo, las páginas estáticas pueden cargarse rápidamente, mientras que las páginas dinámicas obtienen contenido actualizado en el servidor.

Conclusión

Tanto SSR como SSG son técnicas poderosas en Next.js 13 que permiten manejar el renderizado de páginas de manera eficiente. En este capítulo, hemos visto cómo implementar estas técnicas utilizando el Page Router, y cómo elegir la estrategia adecuada según las necesidades de nuestra aplicación.