Server Side Rendering con Next.js: Ventajas y Desventajas

Clase 17 de 19 • Curso de Next.js: Sitios Estáticos y Jamstack

Clase anteriorSiguiente clase

Resumen

¿Qué es el Server Side Rendering y cómo funciona?

El rendering del lado del servidor, más conocido como Server Side Rendering (SSR), es una técnica poderosa en la que las páginas web se generan dinámicamente desde el servidor cada vez que un usuario las solicita. Aunque Next.js no está altamente enfocado en SSR, ofrece la opción como una herramienta valiosa. Esta técnica es particularmente ideal cuando necesitamos que la información presentada esté siempre actualizada en tiempo real.

¿Cuáles son las ventajas del Server Side Rendering?

  1. Actualización en tiempo real: Siempre muestra la última información disponible al usuario.
  2. Flexibilidad: Permite modificar la respuesta y la petición en tiempo real utilizando APIs de Next.js.
  3. Funcionalidades avanzadas: Acceso a una variedad de posibilidades gracias a las características de Next.js.

Sin embargo, es importante tener en cuenta que el SSR tiene un impacto considerable en el servidor. Cada solicitud del usuario golpea al servidor, consumiendo recursos y potencialmente incrementando costos. Esto nos lleva a explorar alternativas más eficientes como el uso de CDN o mover ciertos procesos al cliente para reducir la carga en el servidor.

¿Qué es el comando next export y cómo se usa?

Next.js ofrece una característica única a través del comando next export, el cual transforma tu aplicación en un conjunto de sitios estáticos, eliminando la necesidad de un servidor.

Ventajas de usar next export

  • Simplificación: Al desacoplar el servidor, te quedas únicamente con HTML, JavaScript y CSS, facilitando la gestión del sitio.
  • Flexibilidad de hosting: Estos archivos pueden subirse a plataformas de hospedaje estático como Github Pages, que solo admite estos tipos de archivos sin necesidad de un "bucket".

Pero ojo, el uso de next export implica un precio a pagar: pierdes funcionalidades como el Server Side Rendering, Incremental Site Generation, revalidación de datos, APIs de rutas y más. Esto significa que sacrificarás ciertas capacidades avanzadas que ofrecen las aplicaciones basadas en Node.js.

Aplicaciones prácticas

  • Proyectos que no requieran backend: Ideal para sitios que no dependen de dinámicas servidores.
  • Hosting de bajo costo: Perfecto para proyectos que deben ser alojados en plataformas económicas que solo soporten archivos estáticos.

El balance entre elegir SSR o un enfoque estático dependerá de las necesidades específicas de tu proyecto y los recursos disponibles. Adoptar un enfoque híbrido, combinando lo mejor de ambos mundos, podría ser lo más acertado en muchos casos. Siempre es bueno evaluar tus prioridades de proyecto antes de tomar una decisión técnica. Sigue explorando y aprendiendo, porque el desarrollo web es un campo en constante evolución y siempre habrá algo nuevo que descubrir.