Rendu Dynamique vs Statique

Bon travail ! Nous avons obtenu des données et les avons affichées avec succès à l'utilisateur. Cependant, nous avons rencontré un problème. Le 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.

Plongeons dans les concepts de rendu statique et dynamique.

Rendu Statique

Le rendu statique signifie 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 que les gens n'arrivent à une fête.

Exemple

Imaginez que vous organisez un pique-nique. Au lieu de faire des sandwiches à l'arrivée des invités, vous préparez une série de sandwiches à l'avance et les mettez sur une table. Quand les gens arrivent, ils prennent un sandwich déjà préparé. Cela rend les choses plus rapides et plus faciles pour tout le monde.

Avantages

• Sites Web plus rapides : Comme avoir des sandwiches prêts à l'emploi, le contenu pré-préparé peut être rapidement et facilement servi aux utilisateurs ;
• Moins de travail pour le serveur : Puisque tout est préparé à l'avance, le serveur n'a pas à faire des sandwiches (générer du contenu) pour chaque personne à leur arrivée ;
• Meilleur classement dans les moteurs de recherche : Les moteurs de recherche trouvent plus facile de comprendre et de classer le contenu pré-fait, similaire à avoir une table de pique-nique bien organisée.

Cas d'utilisation

Le rendu statique est idéal pour des choses comme les articles de blog statiques ou les pages de produits où le contenu reste principalement le même et est le même pour tout le monde.

Rendu Dynamique

Le rendu dynamique signifie créer du contenu sur le moment lorsque les utilisateurs le demandent. C'est comme un chef qui prépare des plats personnalisés pour chaque client dans un restaurant.

Exemple

Pensez à un restaurant où le chef cuisine des repas en fonction de ce que chaque client commande. Le chef reçoit les demandes, cuisine le repas et le sert frais. C'est comme le 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 prépare des plats en fonction des préférences des clients, le rendu dynamique est idéal pour afficher du contenu personnalisé comme des tableaux de bord ou des profils d'utilisateur;
• Accès à des informations spécifiques à l'utilisateur : C'est comme un chef qui demande aux clients leurs préférences avant de cuisiner – le rendu dynamique vous permet d'accéder à des informations spécifiques à chaque utilisateur, comme les cookies ou les paramètres de recherche d'URL.

Cas d'utilisation

Le rendu dynamique est utile pour les applications où les données changent souvent ou où le contenu personnalisé est important, comme les flux de médias sociaux ou les tableaux de bord en temps réel.

Retour au Projet

Pour notre application, nous préférons toujours afficher les informations les plus récentes.

Lors de l'utilisation de @vercel/postgres, les règles de mise en cache ne sont pas prédéfinies, nous donnant la flexibilité de décider comment les données sont gérées – qu'elles soient statiques ou dynamiques.

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

Dans le fichier data.ts, incluez la ligne import unstable_noStore from next/cache en haut. Ensuite, utilisez-la dans les fonctions de récupération de données pour personnaliser la manière dont les données sont gérées.

En Pratique