Renderizado estático y dinámico

En el capítulo anterior, obtuviste datos para la página de Resumen del Panel. Sin embargo, discutimos brevemente dos limitaciones de la configuración actual:

1. Las solicitudes de datos están creando una cascada no intencionada.
2. El panel es estático, por lo que cualquier actualización de datos no se reflejará en tu aplicación.

¿Qué es el renderizado estático?

Con el renderizado estático, la obtención de datos y el renderizado ocurren en el servidor en tiempo de compilación (cuando implementas) o al revalidar datos.

Cuando un usuario visita tu aplicación, se sirve el resultado en caché. Hay un par de beneficios del renderizado estático:

• Sitios web más rápidos - El contenido prerenderizado puede almacenarse en caché y distribuirse globalmente cuando se implementa en plataformas como Vercel. Esto garantiza que los usuarios de todo el mundo puedan acceder al contenido de tu sitio web de manera más rápida y confiable.
• Reducción de carga del servidor - Debido a que el contenido está en caché, tu servidor no tiene que generar contenido dinámicamente para cada solicitud de usuario. Esto puede reducir los costos de computación.
• SEO - El contenido prerenderizado es más fácil de indexar para los rastreadores de motores de búsqueda, ya que el contenido ya está disponible cuando se carga la página. Esto puede llevar a mejores posiciones en los resultados de búsqueda.

El renderizado estático es útil para interfaces de usuario sin datos o con datos compartidos entre usuarios, como una publicación de blog estática o una página de producto. Puede que no sea la mejor opción para un panel que tenga datos personalizados que se actualicen con frecuencia.

Lo opuesto al renderizado estático es el renderizado dinámico.

¿Qué es el renderizado dinámico?

Con el renderizado dinámico, el contenido se renderiza en el servidor para cada usuario en tiempo de solicitud (cuando el usuario visita la página). Hay un par de beneficios del renderizado dinámico:

• Datos en tiempo real - El renderizado dinámico permite que tu aplicación muestre datos en tiempo real o actualizados frecuentemente. Esto es ideal para aplicaciones donde los datos cambian a menudo.
• Contenido específico del usuario - Es más fácil servir contenido personalizado, como paneles o perfiles de usuario, y actualizar los datos basados en la interacción del usuario.
• Información en tiempo de solicitud - El renderizado dinámico te permite acceder a información que solo se puede conocer en tiempo de solicitud, como cookies o los parámetros de búsqueda de la URL.

Simulando una obtención de datos lenta

La aplicación de panel que estamos construyendo es dinámica.

Sin embargo, todavía hay un problema mencionado en el capítulo anterior. ¿Qué pasa si una solicitud de datos es más lenta que las demás?

Simulemos una obtención de datos lenta. En app/lib/data.ts, descomenta el console.log y el setTimeout dentro de fetchRevenue():

export async function fetchRevenue() {
  try {
    // Retrasamos artificialmente una respuesta con fines de demostración.
    // ¡No hagas esto en producción!
    console.log('Obteniendo datos de ingresos...');
    await new Promise((resolve) => setTimeout(resolve, 3000));
 
    const data = await sql<Revenue[]>`SELECT * FROM revenue`;
 
    console.log('Obtención de datos completada después de 3 segundos.');
 
    return data;
  } catch (error) {
    console.error('Error de base de datos:', error);
    throw new Error('Error al obtener los datos de ingresos.');
  }
}

Ahora abre http://localhost:3000/dashboard/ en una nueva pestaña y observa cómo la página tarda más en cargar. En tu terminal, también deberías ver los siguientes mensajes:

Obteniendo datos de ingresos...
Obtención de datos completada después de 3 segundos.

Aquí has añadido un retraso artificial de 3 segundos para simular una obtención de datos lenta. El resultado es que ahora toda tu página se bloquea y no muestra la interfaz al visitante mientras se obtienen los datos. Lo que nos lleva a un desafío común que los desarrolladores deben resolver:

Con el renderizado dinámico, tu aplicación es tan rápida como tu obtención de datos más lenta.