Optimiser le pré-rendu des pages avec Next.js tout en récupérant efficacement les données est un défi courant pour les développeurs.
Une mauvaise gestion des données peut entraîner des temps de chargement lents et impacter négativement le SEO et l’expérience utilisateur.
Découvrez comment utiliser les fonctions de Next.js comme getStaticProps et getServerSideProps pour une récupération de données efficace et des performances optimales dans vos applications web.
Introduction à la Récupération de data Next.js
Avant de parler de la récupération des données (data fetching), parlons d’un des concepts les plus importants de Next.js : le pré-rendu. Par défaut, Next.js pré-rend chaque page. Cela signifie que Next.js génère à l’avance le HTML de chaque page, au lieu de tout faire avec du JavaScript côté client. Le pré-rendu peut améliorer les performances et le référencement (SEO). Chaque HTML généré est associé au code JavaScript minimal nécessaire pour cette page. Lorsque la page est chargée par le navigateur, son code JavaScript s’exécute et rend la page entièrement interactive. (Ce processus s’appelle l’hydratation.)
Pour bien illustrer ce concept, voici une comparaison de pré -rendu et non pré -rendu :
Pré-rendu :
Non pré-rendu :
Nous pouvons vérifier que le pré-rendu fonctionne en suivant les étapes suivantes :
Désactivez JavaScript dans votre navigateur en procédant ainsi :
. Dans votre navigateur, inspectez la page et appuyez sur les touches : Ctrl + Maj + P.
. Ensuite, tapez « disable JavaScript » et appuyez sur Entrée.
Après avoir désactivé javascript, une notification d’avertissement sera affichée sur l’onglet Source comme ceci :
Nous devrions constater que notre application est rendue sans JavaScript si nous actualisons la page. Cela est dû au fait que Next.js a pré-rendu l’application en HTML statique, ce qui nous permet de voir l’interface utilisateur de l’application sans exécuter JavaScript. Sinon, si la page n’inclut pas le pré-rendu, elle affichera une page blanche, indiquant qu’elle attend l’exécution de javascript.
Utilisation de getStaticProps pour data Next.js
Dans cette section, nous allons explorer getStaticProps, une des fonctions les plus puissantes de Next.js pour la génération de pages statiques. getStaticProps permet de récupérer et gérer des data Next.js au moment de la compilation et de les injecter dans une page avant que celle-ci ne soit pré-rendue en HTML statique. Ce processus offre des avantages significatifs en termes de performances et de SEO, car il assure que les pages sont servies rapidement aux utilisateurs et optimisées pour les moteurs de recherche.
Dna cette section , nous allons utiliser le lien https://omdbapi.com/ pour récupèrer notre clé d’API et voir les datails et les parametres de l’utilisation de requete.
Dans ce lien, nous verrons quelque chose comme ceci
Pour effectuer une requête de data Next.js, utilisez l’URL suivante : http://www.omdbapi.com/?apikey=[votre_clé]. Remplacez [votre_clé] par votre propre clé API, disponible dans la section « API Key » après votre inscription. Une fois inscrit et votre inscription confirmée, vous recevrez votre clé API par email. Vous pourrez alors l’utiliser pour envoyer des requêtes.
Pour tester notre clé API, vous pouvez envoyer cette requête dans votre navigateur : https://www.omdbapi.com/?s=avengers&apikey=b92a0ec9 . Voilà j’ai utilisé ma clé d’api donc vous pouvez utiliser la vôtre . Le paramètre s signifie « search » (recherche) et fait partie des paramètres de l’API OMDB.
Cette requête nous donne des résultats comme ceci :
Comme nous pouvons le constater, le résultat total de cette requête est de 154, mais seuls 10 résultats sont affichés. Cela est dû au fait que, par défaut, l’API OMDB affiche les résultats de la page 1 lorsque le paramètre de pagination n’est pas spécifié. OMDB offre un paramètre page qui peut varier de 1 à 100 pour spécifier la page de résultats souhaitée. Voici une illustration visuelle de cette explication.
Nous pouvons tester en ajoutant le paramètre page avec une valeur de 2 dans notre requête , par exemple : https://www.omdbapi.com/?s=avengers&page=2&apikey=b92a0ec9 . Cela nous donne un résultat différent.
Maintenant que nous savons comment récupérer la clé API et les paramètres indispensables d’OMDb API, passons au développement de notre programme pour le fetching data. Pour commencer, créons un dossier pages dans notre projet et ajoutons-y un fichier index.js : pages/index.js
return (
<ul>
{posts.map((post, index) => (
<li key={index}>{post.Title}</li>
))}
</ul>
);
}
export async function getStaticProps() {
const res = await fetch("https://www.omdbapi.com/?s=avengers&page=2&apikey=b92a0ec9");
const data = await res.json();
const posts = data.Search;
return {
props: {
posts: posts || [],
},
};
}
Ce composant Blog est une fonction React qui prend posts comme prop destructurée. Il génère une liste <ul> dans laquelle chaque élément <li> correspond à un titre de film extrait de posts.
Ensuite, Nous avons une fonction getStaticProps qui est une méthode spéciale dans NextJS qui permet de pré-rendre une page en utilisant des données obtenues à partir de sources externes. Ici, elle effectue une requête GET à l’API OMDb pour récupérer une liste de films avec « avengers » comme terme de recherche sur la page 2.await fetch(…) récupère les données de l’API OMDb. await res.json() convertit la réponse en JSON. const posts = data.Search; extrait les résultats de la recherche (Search) de l’objet JSON retourné.
return { props: { posts: posts || [] } }; retourne les data Next.js (posts) comme props pour le composant Blog. Si posts est null ou undefined, un tableau vide est assigné par défaut.
En exécutant notre application, cela nous nous un résultat comme ceci :
Voilà, les titres de films « Avengers » sont correctement affichés sur la page.
Maîtrisez le développement d'applications universelles avec NextJS pour une expérience utilisateur optimale.
Configuration des Routes Dynamiques avec getStaticPaths
Dans la partie précédente, nous avons fetching data Next.js en affichant les titres de nos film. Dans cette section, nous mettre en place des routes pour chaque type des data Next.js.
En premier comme nous pouvons remarquer sur le résultat de notre requête , nous avons un url pour le poster chaque, donc creons maintenant une route pour accéder à ce poster. Pour le faire voyons la modification dans notre code : pages/index.js
export default function Blog({ posts }) {
return (
<ul>
{posts.map((post, index) => (
<li key={index}>
<a href="{post.Poster}" target="_self" data-wpel-link="internal" rel="follow noopener noreferrer">{post.Title}</a>
</li>
))}
</ul>
);
}
export async function getStaticProps() {
const res = await fetch("https://www.omdbapi.com/?s=avengers&page=2&apikey=b92a0ec9");
const data = await res.json();
const posts = data.Search;
return {
props: {
posts: posts || [],
},
};
}
Nous avons ajuster cette ligne de code :
<a href="{post.Poster}" target="_self" data-wpel-link="internal" rel="follow noopener noreferrer">{post.Title}</a>
Pour établir un lien vers le poster de chaque film. Ainsi, le titre de notre film est devenu cliquable et nous redirige vers le poster du film correspondant. Voilà le visuel montrant le résultat :
Mais vraiment cel l’objectif de cette mais d’afficher les images de poster avec des routes dynamiques.
Voyons les modifications au niveau de codes : pages/index.js
import Link from "next/link";
import fetch from "node-fetch";
export default function Blog({ posts }) {
return (
<ul>
{posts.map((post, index) => {
const split = post.Poster.split("/");
const poster = split.slice(-1)[0];
return (
<li key={index}>
<Link href="/img/[poster]" as={`/img/${poster}`} target="_blank">
{post.Title}
</Link>
</li>
);
})}
</ul>
);
}
export async function getStaticProps() {
const res = await fetch("https://www.omdbapi.com/?s=avengers&page=2&apikey=b92a0ec9");
const data = await res.json();
const posts = data.Search;
return {
props: {
posts: posts || [],
},
};
}
Explication des extraits des codes :
import Link from "next/link";
import fetch from "node-fetch";
- Link : Ce composant de NextJS permet de créer des liens de navigation entre les pages de l’application.
- fetch : Cette fonction est utilisée pour effectuer des requêtes HTTP, ici à partir du module node-fetch.
export default function Blog({ posts }) {
return (
<ul>
{posts.map((post, index) => {
const split = post.Poster.split("/");
const poster = split.slice(-1)[0];
return (
<li key={index}>
<Link href="/img/[poster]" as={`/img/${poster}`} target="_blank">
{post.Title}
</Link>
</li>
);
})}
</ul>
);
}
- Composant Blog : Ce composant affiche une liste de titres de films.
- props : Le composant reçoit une prop posts, qui est un tableau d’objets représentant des films.
- map : La méthode map itère sur chaque objet post dans le tableau posts.
- const split = post.Poster.split(« / ») : Divise l’URL du poster en segments de chaîne basés sur le caractère /.
- const poster = split.slice(-1)[0] : Prend le dernier segment de cette URL, qui est l’identifiant unique de l’image du poster.
- href= »/img/[poster] » : Définit le chemin dynamique pour la navigation.
- as={/img/${poster}} : Spécifie le chemin réel à utiliser pour l’URL.
- target= »_blank » : Ouvre le lien dans un nouvel onglet.
- {post.Title} : Le titre du film est affiché comme texte du lien.
export async function getStaticProps() {
const res = await fetch("https://www.omdbapi.com/?s=avengers&page=2&apikey=b92a0ec9");
const data = await res.json();
const posts = data.Search;
return {
props: {
posts: posts || [],
},
};
}
- getStaticProps : Cette fonction est utilisée pour récupérer des données au moment de la compilation de la page.
- fetch : Envoie une requête HTTP à l’API OMDB pour rechercher des films avec le terme « avengers ».
- data : La réponse de l’API est convertie en JSON.
- posts : Les résultats de la recherche sont extraits de data.Search.
- props: { posts: posts || [] } : Les résultats des films sont passés comme props au composant Blog. Si posts est undefined, un tableau vide est utilisé par défaut.
Ensuite, nous allons ajuster aussi les codes dans le fichier [poster].js : pages/img/[poster].js
import fetch from "node-fetch";
export default function Poster({ img }) {
return <img src={img} alt="image" / width="" height="">;
}
export async function getStaticPaths() {
const res = await fetch("https://www.omdbapi.com/?s=avengers&page=2&apikey=b92a0ec9");
const data = await res.json();
const posts = data.Search;
const paths = posts.map(post => {
const split = post.Poster.split("/");
const poster = split.slice(-1)[0];
return { params: { poster: poster } };
});
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
const { poster } = params;
const img = `https://m.media-amazon.com/images/M/${poster}`;
return {
props: {
img,
},
};
}
- fetch : Cette fonction permet d’effectuer des requêtes HTTP. Ici, elle est importée depuis le module node-fetch pour être utilisée dans un environnement Node.js.
export default function Poster({ img }) {
return <img src={img} alt="image" / width="" height="">;
}
- Poster : Ce composant React reçoit une prop img, qui est l’URL de l’image à afficher.
- return : Le composant retourne un élément
<img>avec src définie à l’URL de l’image et alt définie à « image ».
export async function getStaticPaths() {
const res = await fetch("https://www.omdbapi.com/?s=avengers&page=2&apikey=b92a0ec9");
const data = await res.json();
const posts = data.Search;
const paths = posts.map(post => {
const split = post.Poster.split("/");
const poster = split.slice(-1)[0];
return { params: { poster: poster } };
});
return { paths, fallback: false };
}
- getStaticPaths : Cette fonction est utilisée pour générer des chemins dynamiques à la compilation.
- fetch : Envoie une requête à l’API OMDB pour rechercher des films avec le terme « avengers« .
- data : La réponse de l’API est convertie en JSON.
- posts : Les résultats de la recherche sont extraits de data.Search.
- paths : Pour chaque post, l’URL du poster est divisée (split) et le dernier segment est utilisé comme identifiant unique (poster). Un objet avec ce poster est ajouté à params.
- return : Retourne un objet contenant paths et fallback: false.
export async function getStaticProps({ params }) {
const { poster } = params;
const img = `https://m.media-amazon.com/images/M/${poster}`;
return {
props: {
img,
},
};
- getStaticProps : Cette fonction est utilisée pour fournir de data à la page avant qu’elle ne soit rendue.
- params : Contient les paramètres dynamiques du chemin.
- poster : Est extrait de params.
- img : Construit l’URL complète de l’image en utilisant poster.
- return : Retourne un objet avec props contenant l’URL de l’image.
En exécutant notre application, nous obtiendrons le résultat suivant : voici la liste de nos films retournés par notre requête.
En cliquant sur le titre d’un film, le poster du film s’ouvre dans une URL spécifique dans un nouvel onglet comme ceci.
Voilà, nous avons terminé avec succès notre objectif.
Données Dynamiques avec getServerSideProps pour Data Next.js
L’une des fonctionnalités puissantes de Next.js est getServerSideProps, qui permet de récupérer des data Next.js à chaque requête sur le serveur. Contrairement à getStaticProps qui génère les data Next.js à la construction du site, getServerSideProps obtient les données à chaque fois qu’une page est rendue, idéal pour les contenus dynamiques ou nécessitant une authentification. Dans cette section, nous explorerons comment utiliser getServerSideProps pour : Dynamiser le contenu de nos pages avec des données provenant d’une API ou d’une base de données.
Pour implémenter cette fonctionnalité dans notre page, voyons la modification dans le fichier index.js : pages/index.js.
import Link from "next/link";
import fetch from "node-fetch";
export default function Blog({ posts }) {
return (
<ul>
{posts.map((post, index) => {
const split = post.Poster.split("/");
const poster = split.slice(-1)[0];
return (
<li key={index}>
<Link href="/img/[poster]" as={`/img/${poster}`} target="_blank">
{post.Title}
</Link>
</li>
);
})}
</ul>
);
}
export async function getServerSideProps() {
const res = await fetch("https://www.omdbapi.com/?s=avengers&page=2&apikey=b92a0ec9");
const data = await res.json();
const posts = data.Search;
return {
props: {
posts: posts || [],
},
};
}
export async function getServerSideProps()
Et ce changement nous donne le même résultat dans le navigateur mais le changements sera remarqué dans notre terminal. En effets à chaque requête que nous allons envoyer, le serveur compile le code et envoyer le résultat correspondant à chaque requête. Voilà un visuel illustrative de cela.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
Conclusion
Maîtriser la récupération de données avec Next.js est essentiel pour développer des applications performantes et bien référencées. En utilisant getStaticProps pour les pages statiques, getStaticPaths pour les routes dynamiques, et getServerSideProps pour les contenus dynamiques, vous pouvez optimiser votre site pour offrir une expérience utilisateur fluide et rapide.
Ces techniques permettent non seulement de répondre aux besoins des utilisateurs mais aussi d’améliorer significativement le SEO de votre site. En appliquant ces méthodes, vous serez en mesure de créer des applications Next.js robustes et hautement performantes .Et par la suite nous aborderons un projet Next.js.
