Dans le processus de développement d'une Next.js application, la récupération des données à partir des API est un aspect crucial pour afficher du contenu dynamique. Cet article vous guidera dans l'utilisation getStaticProps de la récupération de données statiques pendant le processus de construction et dans la getServerSideProps récupération des données des API à chaque requête.
Utilisation de getStaticProps
getStaticProps est une méthode intégrée Next.js qui prend en charge la récupération de données statiques pendant le processus de construction. Il vous permet de créer des pages statiques avec des données interrogées, qui sont pré-rendues avant le déploiement de l'application. Voici un exemple basique d'utilisation getStaticProps:
export async function getStaticProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
};
}
Dans l'exemple ci-dessus, nous utilisons fetch pour interroger les données d'une API et renvoyer les données sous forme d'accessoires.
Utilisation de getServerSideProps
getServerSideProps est une autre méthode Next.js qui vous permet de récupérer des données à partir des API à chaque requête. Cela garantit que le contenu est toujours à jour et dynamique. Voici un exemple d'utilisation getServerSideProps:
export async function getServerSideProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
};
}
La getServerSideProps méthode interrogera les données de l'API chaque fois qu'une requête est adressée à la page.
Conclusion
Dans cette section, vous avez appris comment récupérer efficacement les données des API de votre Next.js application. En utilisant getStaticProps et getServerSideProps, vous pouvez afficher de manière flexible le contenu statique et dynamique dans votre application.