¡Buen trabajo! Hemos obtenido algunos datos y los hemos mostrado correctamente al usuario. Sin embargo, hemos encontrado un problema. El inconveniente proviene de nuestro panel estático, lo que significa que cualquier actualización en los datos no se reflejará en la aplicación.

Analicemos los conceptos de renderizado estático y dinámico.

Renderizado Estático

El renderizado estático consiste en preparar y mostrar el contenido antes de que el usuario lo solicite. Es como preparar varios bocadillos antes de que lleguen los invitados a una fiesta.

Ejemplo

Imagina que organizas un picnic. En lugar de preparar los bocadillos cuando llegan los invitados, los preparas con antelación y los colocas en una mesa. Cuando las personas llegan, toman un bocadillo ya preparado. Esto hace que todo sea más rápido y sencillo para todos.

Beneficios

• Sitios web más rápidos: Al igual que tener bocadillos listos, el contenido pre-preparado puede servirse de manera rápida y sencilla a los usuarios;
• Menor carga para el servidor: Como todo está preparado de antemano, el servidor no tiene que preparar bocadillos (generar contenido) para cada persona al llegar;
• Mejor posicionamiento en buscadores: Los motores de búsqueda pueden entender y clasificar más fácilmente el contenido pre-generado, similar a tener una mesa de picnic bien organizada.

Casos de uso

El renderizado estático es ideal para elementos como publicaciones de blogs estáticos o páginas de productos donde el contenido permanece mayormente igual y es el mismo para todos.

Renderizado Dinámico

El renderizado dinámico significa crear contenido en el momento en que los usuarios lo solicitan. Es como un chef que prepara platos personalizados para cada cliente en un restaurante.

Ejemplo

Piensa en un restaurante donde el chef cocina los platos según lo que cada cliente pide. El chef recibe las solicitudes, cocina el plato y lo sirve fresco. Esto es similar al renderizado dinámico, donde el contenido se genera para cada usuario que visita una página.

Beneficios

• Actualizaciones en Tiempo Real: Así como un chef puede preparar un plato con ingredientes frescos, el renderizado dinámico permite que tu aplicación muestre datos en tiempo real o que se actualizan con frecuencia;
• Contenido Personalizado: Como un chef que prepara platos según las preferencias del cliente, el renderizado dinámico es ideal para mostrar contenido personalizado como paneles de control o perfiles de usuario;
• Acceso a Información Específica del Usuario: Es como un chef que pregunta a los clientes por sus preferencias antes de cocinar; el renderizado dinámico permite acceder a información específica de cada usuario, como cookies o parámetros de búsqueda en la URL.

Casos de Uso

El renderizado dinámico es útil para aplicaciones donde los datos cambian con frecuencia o donde el contenido personalizado es importante, como los feeds de redes sociales o paneles en tiempo real.

Volver al Proyecto

Para nuestra aplicación, siempre preferimos mostrar la información más actualizada.

Al usar @vercel/postgres, las reglas de almacenamiento en caché no están predefinidas, lo que nos da la flexibilidad de decidir cómo se maneja la información – ya sea estática o dinámica.

Para hacer que el panel sea dinámico, podemos utilizar una función de Next.js llamada unstable_noStore. Esto nos permite omitir el renderizado estático. Así es como se hace:

En el archivo data.ts, incluye la línea import unstable_noStore from next/cache al principio. Luego, utilízala en las funciones de obtención de datos para personalizar cómo se maneja la información.

En la Práctica