Rendu statique et dynamique

Dans le chapitre précédent, vous avez récupéré des données pour la page de vue d'ensemble du tableau de bord. Cependant, nous avons brièvement discuté de deux limitations de la configuration actuelle :

1. Les requêtes de données créent une cascade involontaire.
2. Le tableau de bord est statique, donc toute mise à jour des données ne sera pas reflétée dans votre application.

Qu'est-ce que le rendu statique ?

Avec le rendu statique, la récupération des données et le rendu se font sur le serveur au moment de la construction (lors du déploiement) ou lors de la revalidation des données.

Lorsqu'un utilisateur visite votre application, le résultat mis en cache est servi. Le rendu statique présente plusieurs avantages :

• Sites web plus rapides - Le contenu pré-rendu peut être mis en cache et distribué globalement lorsqu'il est déployé sur des plateformes comme Vercel. Cela garantit que les utilisateurs du monde entier peuvent accéder au contenu de votre site web plus rapidement et de manière plus fiable.
• Charge serveur réduite - Comme le contenu est mis en cache, votre serveur n'a pas besoin de générer dynamiquement du contenu pour chaque requête utilisateur. Cela peut réduire les coûts de calcul.
• SEO - Le contenu pré-rendu est plus facile à indexer pour les robots des moteurs de recherche, car le contenu est déjà disponible au chargement de la page. Cela peut améliorer le classement dans les moteurs de recherche.

Le rendu statique est utile pour les interfaces utilisateur sans données ou avec des données partagées entre les utilisateurs, comme un article de blog statique ou une page de produit. Il peut ne pas convenir à un tableau de bord avec des données personnalisées qui sont régulièrement mises à jour.

L'opposé du rendu statique est le rendu dynamique.

Qu'est-ce que le rendu dynamique ?

Avec le rendu dynamique, le contenu est rendu sur le serveur pour chaque utilisateur au moment de la requête (lorsque l'utilisateur visite la page). Le rendu dynamique présente plusieurs avantages :

• Données en temps réel - Le rendu dynamique permet à votre application d'afficher des données en temps réel ou fréquemment mises à jour. C'est idéal pour les applications où les données changent souvent.
• Contenu spécifique à l'utilisateur - Il est plus facile de servir du contenu personnalisé, comme des tableaux de bord ou des profils utilisateur, et de mettre à jour les données en fonction des interactions de l'utilisateur.
• Informations au moment de la requête - Le rendu dynamique permet d'accéder à des informations qui ne peuvent être connues qu'au moment de la requête, comme les cookies ou les paramètres de recherche de l'URL.

Simulation d'une récupération de données lente

L'application de tableau de bord que nous construisons est dynamique.

Cependant, il reste un problème mentionné dans le chapitre précédent. Que se passe-t-il si une requête de données est plus lente que toutes les autres ?

Simulons une récupération de données lente. Dans app/lib/data.ts, décommentez le console.log et le setTimeout dans fetchRevenue() :

export async function fetchRevenue() {
  try {
    // Nous retardons artificiellement une réponse à des fins de démonstration.
    // Ne faites pas cela en production :)
    console.log('Récupération des données de revenus...');
    await new Promise((resolve) => setTimeout(resolve, 3000));
 
    const data = await sql<Revenue[]>`SELECT * FROM revenue`;
 
    console.log('Récupération des données terminée après 3 secondes.');
 
    return data;
  } catch (error) {
    console.error('Erreur de base de données :', error);
    throw new Error('Échec de la récupération des données de revenus.');
  }
}

Maintenant, ouvrez http://localhost:3000/dashboard/ dans un nouvel onglet et remarquez que la page prend plus de temps à charger. Dans votre terminal, vous devriez également voir les messages suivants :

Récupération des données de revenus...
Récupération des données terminée après 3 secondes.

Ici, vous avez ajouté un délai artificiel de 3 secondes pour simuler une récupération de données lente. Le résultat est que maintenant toute votre page est bloquée et ne peut pas afficher l'interface utilisateur au visiteur pendant que les données sont récupérées. Ce qui nous amène à un défi courant que les développeurs doivent résoudre :

Avec le rendu dynamique, votre application est aussi rapide que votre récupération de données la plus lente.