Récupération des données au moment de la requête

Si vous avez besoin de récupérer des données au moment de la requête plutôt qu'au moment de la construction, vous pouvez utiliser le Rendu côté serveur (SSR) :

Pour utiliser le Rendu côté serveur (SSR), vous devez exporter getServerSideProps au lieu de getStaticProps depuis votre page.

Utilisation de getServerSideProps

Voici le code de base pour getServerSideProps. Il n'est pas nécessaire pour notre exemple de blog, donc nous ne l'implémenterons pas.

export async function getServerSideProps(context) {
  return {
    props: {
      // props pour votre composant
    },
  };
}

Comme getServerSideProps est appelé au moment de la requête, son paramètre (context) contient des paramètres spécifiques à la requête.

Vous devriez utiliser getServerSideProps uniquement si vous avez besoin de pré-rendre une page dont les données doivent être récupérées au moment de la requête. Le temps jusqu'au premier octet (TTFB) sera plus lent qu'avec getStaticProps car le serveur doit calculer le résultat à chaque requête, et le résultat ne peut pas être mis en cache par un CDN sans configuration supplémentaire.

Rendu côté client

Si vous n'avez pas besoin de pré-rendre les données, vous pouvez également utiliser la stratégie suivante (appelée Rendu côté client (CSR)) :

• Générer statiquement (pré-rendre) les parties de la page qui ne nécessitent pas de données externes.
• Lorsque la page se charge, récupérer les données externes depuis le client en utilisant JavaScript et remplir les parties restantes.

Cette approche fonctionne bien pour les pages de tableau de bord utilisateur, par exemple. Comme un tableau de bord est une page privée et spécifique à l'utilisateur, le référencement (SEO) n'est pas pertinent et la page n'a pas besoin d'être pré-rendue. Les données sont fréquemment mises à jour, ce qui nécessite une récupération des données au moment de la requête.

SWR

L'équipe derrière Next.js a créé un hook React pour la récupération de données appelé SWR. Nous le recommandons fortement si vous récupérez des données côté client. Il gère la mise en cache, la revalidation, le suivi du focus, la récupération à intervalle régulier, et plus encore. Nous ne couvrirons pas les détails ici, mais voici un exemple d'utilisation :

import useSWR from 'swr';
 
function Profile() {
  const { data, error } = useSWR('/api/user', fetch);
 
  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>hello {data.name}!</div>;
}

Consultez la documentation de SWR pour en savoir plus.

C'est tout !

Dans la prochaine leçon, nous créerons des pages pour chaque article de blog en utilisant les routes dynamiques.

Encore une fois, vous pouvez obtenir des informations détaillées sur getStaticProps et getServerSideProps dans la documentation sur la récupération des données.