Excellent travail ! Nous avons récupéré des données et les avons affichées avec succès à l'utilisateur. Cependant, un problème est survenu. Ce problème provient de notre tableau de bord statique, ce qui signifie que toute mise à jour des données ne sera pas reflétée dans l'application.

Explorons les concepts de rendu statique et dynamique.

Rendu statique

Le rendu statique consiste à préparer et afficher le contenu avant même qu'un utilisateur ne le demande. C'est comme préparer une série de sandwiches avant l'arrivée des invités à une fête.

Exemple

Imaginez que vous organisez un pique-nique. Au lieu de préparer les sandwiches à l'arrivée des invités, vous les préparez à l'avance et les disposez sur une table. Lorsque les gens arrivent, ils prennent un sandwich déjà prêt. Cela rend le service plus rapide et plus simple pour tout le monde.

Avantages

• Sites web plus rapides : Comme pour les sandwiches déjà prêts, le contenu pré-généré peut être servi rapidement et facilement aux utilisateurs ;
• Moins de charge pour le serveur : Puisque tout est préparé à l'avance, le serveur n'a pas à préparer les sandwiches (générer le contenu) pour chaque personne à son arrivée ;
• Meilleur référencement : Les moteurs de recherche comprennent et classent plus facilement le contenu pré-généré, à l'image d'une table de pique-nique bien organisée.

Cas d'utilisation

Le rendu statique est idéal pour des éléments comme des articles de blog statiques ou des pages produits où le contenu reste principalement identique et est le même pour tous.

Rendu dynamique

Le rendu dynamique consiste à générer le contenu à la demande, lorsque les utilisateurs le sollicitent. C'est comme un chef qui prépare des plats personnalisés pour chaque client dans un restaurant.

Exemple

Imaginez un restaurant où le chef cuisine les repas en fonction de la commande de chaque client. Le chef reçoit les demandes, prépare le plat et le sert immédiatement. Cela correspond au rendu dynamique, où le contenu est généré pour chaque utilisateur visitant une page.

Avantages

• Mises à jour en temps réel : Tout comme un chef peut préparer un plat avec des ingrédients frais, le rendu dynamique permet à votre application d'afficher des données en temps réel ou fréquemment mises à jour ;
• Contenu personnalisé : Comme un chef qui adapte ses plats selon les préférences des clients, le rendu dynamique est idéal pour afficher du contenu personnalisé tel que des tableaux de bord ou des profils utilisateur ;
• Accès à des informations spécifiques à l'utilisateur : C'est comme si le chef demandait les préférences des clients avant de cuisiner – le rendu dynamique permet d'accéder à des informations propres à chaque utilisateur, comme les cookies ou les paramètres de recherche dans l'URL.

Cas d'utilisation

Le rendu dynamique est pertinent pour les applications où les données changent fréquemment ou lorsque le contenu personnalisé est essentiel, comme les fils d'actualité sur les réseaux sociaux ou les tableaux de bord en temps réel.

Retour au projet

Pour notre application, nous privilégions toujours l'affichage des informations les plus récentes.

Lorsque l'on utilise @vercel/postgres, les règles de mise en cache ne sont pas prédéfinies, ce qui nous offre la flexibilité de choisir la gestion des données – statique ou dynamique.

Pour rendre le tableau de bord dynamique, nous pouvons utiliser une fonctionnalité de Next.js appelée unstable_noStore. Elle permet d'éviter le rendu statique. Voici comment procéder :

Dans le fichier data.ts, ajoutez la ligne import unstable_noStore from next/cache en haut du fichier. Ensuite, utilisez-la dans les fonctions de récupération de données pour personnaliser la gestion des données.

En pratique