Data Next.js: Méthodes de Récupération

L'Équipe Alphorm
L'Équipe Alphorm 18e lecture en min

Dans notre précédent article, nous avons exploré la mise en place d’un projet avec Next.js et les nombreux avantages qu’il offre pour le développement d’applications web modernes. Aujourd’hui, nous allons approfondir un aspect essentiel de Next.js : la récupération de données. Data Next.js est un élément crucial pour optimiser les performances et le référencement (SEO) de vos applications web. Que vous utilisiez getStaticProps, getStaticPaths ou getServerSideProps, chacune de ces méthodes offre des avantages uniques pour pré-rendre vos pages et améliorer leur interactivité. Dans cet article, nous explorerons en détail comment utiliser ces techniques de récupération de données Next.js pour tirer le meilleur parti de votre application, tout en maximisant son efficacité et sa visibilité sur les moteurs de recherche.

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 :

schéma de pré rendu data Next.js

Non pré-rendu :

schéma non rendu data Next.js

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.

Visuel montrant comment désactiver JavaScript sur une page pour data Next.js

Après avoir désactivé javascript, une notification d’avertissement sera affichée sur l’onglet Source comme ceci :

Illustration d'un avertissement sur l’onglet source après désactivation de JavaScript pour data Next.js

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

Page d’OMDb API pour récupérer la clé d’API pour data Next.js

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.

Illustration des paramètres d'OMDb API pour data Next.js

Cette requête nous donne des résultats comme ceci :

Résultats d'une requête de recherche pour Avengers avec l'API OMDb pour data Next.js

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.

Visuel montrant le paramètre de pagination d'OMDb API pour data Next.js

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.

Visuel montrant le résultat de la page 2 d'une requête pour data Next.js

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 :

Liste des titres de films Avengers sur la page 2 pour data Next.js

Voilà, les titres de films « Avengers » sont correctement affichés sur la page.

Plongez dans l’univers fascinant de Next.js et devenez un expert en 2024 grâce à notre formation vidéo exclusive sur Alphorm : Formation Next.js

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 :

Illustration justifiant la présence du lien vers le poster

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.
  • mapLa 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" />;
}
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" />;
}
				
			
  • 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.
				
					xport 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.

Titres des films Avengers sur la page 2

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.

Visuel montrant le poster d'un film avec une route dynamique pour data Next.js

Voilà, nous avons terminé avec succès notre objectif.

Pour aller plus loin et maîtriser pleinement les compétences abordées dans cet article, nous vous invitons à découvrir les formations d’Alphorm. Formations Alphorm.

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.

Visuel montrant le résultat de chaque requête

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

ÉTIQUETÉ : NextJS
Partager cet article
Par L'Équipe Alphorm Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.