Renderizado del Lado del Cliente (CSR) vs. Renderizado del Lado del Servidor (SSR) en Next.js

Tiempo de lectura: 2 minutos

Si usas Next.js puedes realizar el renderizado de datos del lado del cliente (CSR) o del lado del servidor (SSR).

A continuación vamos a analizar la diferencia entre Renderizado del Lado del Cliente y del Lado del Servidor:

Renderizado del Lado del Cliente (CSR):

• Cómo Funciona:
  • En el renderizado del lado del cliente (CSR), el HTML inicial se envía vacío o con un esqueleto básico desde el servidor.
  • Luego, el navegador del cliente descarga y ejecuta JavaScript, que a su vez solicita datos y actualiza el contenido de la página en el cliente.
• Ventajas:
  • Respuestas rápidas para el usuario.
  • Interactividad rápida, ya que el contenido puede actualizarse sin recargar la página.
• Desventajas:
  • Tiempo de carga inicial más lento, ya que requiere descargar e interpretar JavaScript.
  • Puede afectar el SEO si no se maneja correctamente.

Renderizado del Lado del Servidor (SSR):

• Cómo Funciona:
  • En el renderizado del lado del servidor (SSR), el servidor genera el HTML completo con los datos requeridos en cada solicitud.
  • El navegador recibe HTML pre-renderizado y listo para mostrar, lo que significa que no hay tiempo de espera adicional para obtener datos.
• Ventajas:
  • Tiempo de carga inicial más rápido, ya que el HTML está pre-renderizado.
  • Mejor SEO, ya que los motores de búsqueda pueden ver el contenido directamente en el HTML inicial.
• Desventajas:
  • Tiempos de respuesta más lentos para el usuario si la generación del HTML es costosa.
  • Mayor carga en el servidor, especialmente con un gran volumen de solicitudes.

Funciones de Obtención de Datos en Next.js

getStaticProps:

• Descripción:
  • Utilizado para generar páginas estáticas durante la compilación (build time).
  • Se ejecuta solo en el servidor durante la construcción y no se ejecuta en el cliente.
• Uso:
  • Ideal para contenido estático o que cambia con poca frecuencia.
  • Puede llamar a API’s externas, acceder a bases de datos, etc.
• Ejemplo:

  export async function getStaticProps() {
    // Lógica para obtener datos
    return {
      props: {
        // Datos obtenidos
      },
      revalidate: 60, // Opcional, para volver a generar la página cada 60 segundos
    };
  }

getStaticPaths:

• Descripción:
  • Utilizado junto con getStaticProps para rutas dinámicas.
  • Define las rutas para las cuales getStaticProps debe generar páginas estáticas.
• Uso:
  • Especifica las rutas dinámicas que deben pre-renderizarse.
• Ejemplo:

  export async function getStaticPaths() {
    // Lógica para obtener rutas dinámicas
    return {
      paths: [
        // Lista de rutas dinámicas
      ],
      fallback: false, // Opcional, controla el comportamiento para rutas no especificadas
    };
  }

getServerSideProps:

• Descripción:
  • Utilizado para generar páginas en el servidor durante cada solicitud.
  • Se ejecuta en el servidor para cada solicitud, lo que permite obtener datos actualizados en tiempo real.
• Uso:
  • Ideal para contenido que cambia frecuentemente o necesita datos en tiempo real.
• Ejemplo:

  export async function getServerSideProps() {
    // Lógica para obtener datos en tiempo real
    return {
      props: {
        // Datos obtenidos
      },
    };
  }