Return
Published on

Fetching Data in Next.js

Learn how to fetch data in a Next.js project and use it as a prop in a component.

Le fetching côté serveur est introduit dans l'app directory depuis Next.js13, remplaçant partiellement les fonctions getServerSideProps et getStaticProps. Cette méthode permet d'alléger et d'optimiser le rendu côté client. En chargeant les données au niveau du serveur, il est possible de réduire le temps de chargement des pages et de rendre le site plus rapide.

Exemple d'utilisation

tsx
async function getData() {
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/selection`, {
        cache: "force-cache",
    });
 
    if (!response.ok) {
        throw new Error("Erreur lors de la récupération des données");
    }
 
    const data = await response.json();
    return data;
}
 
export default async function Page() {
    const data = await getData();
 
    return (
        <section className="flex flex-col gap-6 my-4 px-4 justify-between w-full max-w-max-w-[1400px] max-w-max-auto sm:my-5 md:my-9 md:h-full lg:my-12">
            <SelectWeekForm />
            <SelectorOfTheWeek data={data} />
        </section>
    );
}

Dans cet exemple, la fonction asynchrone getData est créée pour récupérer les données depuis l'API. La fonction Page est également asynchrone pour pouvoir attendre (await) la récupération des données avant de les passer au composants enfants.