Évaluation finale

Quiz du cours « Next.js — performance, SEO et mise en production »

12 questions à choix unique pour vérifier que le parcours est acquis. Une seule tentative de réponse par question, correction immédiate.

80 % de bonnes réponses sont nécessaires pour valider le cours. Vous pouvez repasser le quiz autant de fois que nécessaire : seul votre meilleur score est conservé.

Quelle mesure Core Web Vitals permet d’évaluer le temps nécessaire à l’affichage du plus grand élément de contenu visible ?

LCP INP CLS Le temps de réponse du serveur

Pour comparer deux rapports Lighthouse d’une route, quelle démarche améliore le plus la reproductibilité de la mesure ?

Comparer un audit de production à un audit réalisé en développement Conserver les mêmes conditions de mesure, notamment l’environnement et les paramètres d’audit Modifier le contenu de la page entre les deux audits pour tester davantage de cas Retenir uniquement le meilleur résultat obtenu sur plusieurs exécutions

Une route dépasse le budget documenté de JavaScript client après l’ajout d’une fonctionnalité. Quelle vérification est la plus pertinente ?

Vérifier uniquement la taille du HTML renvoyé par le serveur Ajouter le poids du CSS au budget de JavaScript client Examiner le waterfall réseau pour identifier les modules JavaScript chargés côté client Supprimer les métadonnées de la route pour réduire le bundle

Dans une route dynamique d’itinéraire avec l’App Router, quelle approche permet de générer un titre et une description à partir des données de l’itinéraire ?

Définir le titre uniquement dans le composant client de la page Ajouter un titre fixe dans le layout racine pour toutes les routes Placer les données de métadonnées dans un fichier JSON-LD Exporter generateMetadata et utiliser les paramètres de route pour récupérer l’itinéraire

Pour que le partage d’un itinéraire affiche un aperçu cohérent sur les réseaux sociaux, que faut-il définir dans ses métadonnées ?

Des champs Open Graph adaptés, dont un titre, une description et une image de partage Un bloc JSON-LD contenant uniquement le nom de l’itinéraire Un titre dans loading.tsx et une image dans le composant client Une URL canonique à la place de toute balise Open Graph

Lorsqu’un itinéraire est intégré dans un bloc JSON-LD, quelle précaution protège la validité et la sûreté des données intégrées dans le HTML ?

Insérer directement les valeurs dans une chaîne JSON sans les sérialiser Sérialiser les données et échapper les caractères susceptibles de fermer ou d’altérer la balise script Remplacer les données de l’itinéraire par des valeurs fixes pour toutes les pages Placer le JSON-LD dans un attribut style pour éviter son interprétation

Une zone de la fiche dépend de données lentes, tandis que le reste de la page peut s’afficher immédiatement. Comment isoler cette attente ?

Attendre toutes les données dans le composant parent avant de rendre la page Déplacer toute la page dans un composant client Placer la zone dépendante des données derrière une frontière `` avec un contenu de repli Remplacer la récupération des données par un délai artificiel

Dans l’App Router, quel mécanisme fournit un état de chargement associé à une route pendant le chargement de ses segments ?

Un fichier metadata.tsx dans le dossier de la route Une balise `` ajoutée automatiquement à chaque page Un composant loading déclaré dans next.config.js Un fichier loading.tsx placé dans le segment concerné

Quelle observation dans le navigateur confirme qu’une page est diffusée en streaming avant la résolution de toutes ses données ?

Des fragments de contenu arrivent progressivement dans la réponse, avant que les données lentes soient toutes résolues Le JavaScript de la page est entièrement exécuté avant l’envoi du premier octet HTML Toutes les requêtes réseau se terminent avant l’arrivée du premier fragment HTML Le code source HTML contient uniquement le squelette de chargement

Une partie de la fiche d’itinéraire est statique et ne comporte aucune interaction. Quel choix aide à limiter le JavaScript envoyé au navigateur ?

Ajouter use client au composant pour faciliter son rendu La conserver comme composant serveur et ne transmettre que les données nécessaires aux composants clients Convertir le composant en composant client puis désactiver son état local Importer le composant depuis une balise script dans la page

Le module de carte est une fonctionnalité secondaire qui ne doit être chargé que lorsque l’utilisateur en a besoin. Quelle approche convient ?

Importer le module statiquement dans le layout racine Ajouter use client au layout racine pour charger la carte sur toutes les routes Utiliser un import dynamique déclenché lorsque la fonctionnalité de carte devient nécessaire Dupliquer le module de carte dans chaque fiche d’itinéraire

Après le déploiement, les données de terrain montrent une dégradation de l’INP. Quelle action correspond à une surveillance utile des performances réelles ?

Remplacer les données de terrain par le dernier score Lighthouse Attendre la prochaine refonte avant d’examiner les interactions concernées Comparer seulement la taille du HTML avec le rapport de référence Analyser les mesures réelles par route et appareil, puis investiguer la régression et vérifier la correction après déploiement

Toutes les questions doivent être répondues.