En este capítulo, vamos a explorar cómo funciona el renderizado de páginas en Next.js 13 y cómo se lleva a cabo el SSR (Server-Side Rendering). El App Router en Next.js 13 facilita el manejo de diferentes estrategias de renderizado, lo que optimiza tanto el rendimiento como la experiencia del usuario.

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

El Server-Side Rendering (SSR) es un método donde las páginas son renderizadas en el servidor en lugar de en el cliente (navegador). Esto significa que el contenido completo de una página se genera en el servidor antes de enviarse al cliente, lo que mejora la optimización para motores de búsqueda (SEO) y la velocidad de carga inicial.

En Next.js, el SSR se maneja mediante la función getServerSideProps. Esta función permite obtener datos en el servidor antes de renderizar la página y enviarlos al componente para ser mostrados.

Ejemplo básico de SSR

A continuación, se muestra un ejemplo básico de cómo implementar SSR en una página:

javascript

En este caso, cada vez que un usuario visita una página de perfil, los datos se recuperan del servidor y la página se genera dinámicamente.

Renderizado Estático (SSG) con Incremental Static Regeneration (ISR)

Además de SSR, Next.js también permite el renderizado estático a través del método Static Site Generation (SSG). Con el SSG, las páginas se generan de manera estática durante el tiempo de compilación, lo que resulta en tiempos de carga muy rápidos.

En Next.js 13, podemos combinar SSG con Incremental Static Regeneration (ISR), lo que permite regenerar páginas estáticas después de haber sido construidas, basándonos en ciertos intervalos de tiempo o cambios en los datos.

Aquí tienes un ejemplo:

javascript

Con ISR, podemos beneficiarnos de la velocidad del SSG mientras mantenemos los datos actualizados sin necesidad de recompilar toda la aplicación.

Client-Side Rendering (CSR)

Aunque SSR y SSG son fundamentales en Next.js, no debemos olvidar que también podemos usar el Client-Side Rendering (CSR). En este caso, el contenido dinámico se renderiza directamente en el cliente, lo que es útil para ciertas interacciones que no requieren renderizado previo en el servidor.

javascript

El Client-Side Rendering (CSR) es ideal para funcionalidades altamente interactivas que dependen de la interacción del usuario, como las búsquedas o los filtros.

Conclusión

Next.js 13 ofrece un enfoque muy flexible para el renderizado de páginas, permitiendo utilizar SSR, SSG, ISR y CSR según sea necesario. Esto permite optimizar tanto la experiencia del usuario como el rendimiento de la aplicación.