Détails sur getStaticProps

Voici quelques informations essentielles que vous devriez connaître concernant getStaticProps.

Récupérer des données depuis une API externe ou une base de données

Dans lib/posts.js, nous avons implémenté getSortedPostsData qui récupère des données depuis le système de fichiers. Mais vous pouvez également récupérer des données depuis d'autres sources, comme un point de terminaison d'API externe, et cela fonctionnera parfaitement :

export async function getSortedPostsData() {
  // Au lieu du système de fichiers,
  // récupère les données des posts depuis un point de terminaison d'API externe
  const res = await fetch('..');
  return res.json();
}

Remarque : Next.js fournit un polyfill pour fetch() à la fois côté client et serveur. Vous n'avez pas besoin de l'importer.

Vous pouvez également interroger directement une base de données :

import someDatabaseSDK from 'someDatabaseSDK'
 
const databaseClient = someDatabaseSDK.createClient(...)
 
export async function getSortedPostsData() {
  // Au lieu du système de fichiers,
  // récupère les données des posts depuis une base de données
  return databaseClient.query('SELECT posts...')
}

Ceci est possible car getStaticProps s'exécute uniquement côté serveur. Il ne s'exécutera jamais côté client. Il ne sera même pas inclus dans le bundle JS pour le navigateur. Cela signifie que vous pouvez écrire du code comme des requêtes directes à une base de données sans qu'elles ne soient envoyées aux navigateurs.

Développement vs Production

• En développement (npm run dev ou yarn dev), getStaticProps s'exécute à chaque requête.
• En production, getStaticProps s'exécute au moment du build. Cependant, ce comportement peut être amélioré en utilisant la clé fallback retournée par getStaticPaths.

Comme il est conçu pour s'exécuter au moment du build, vous ne pourrez pas utiliser des données qui ne sont disponibles qu'au moment de la requête, comme les paramètres de requête ou les en-têtes HTTP.

Uniquement autorisé dans une page

getStaticProps ne peut être exporté que depuis une page. Vous ne pouvez pas l'exporter depuis des fichiers qui ne sont pas des pages.

L'une des raisons de cette restriction est que React a besoin d'avoir toutes les données requises avant que la page ne soit rendue.

Que faire si j'ai besoin de récupérer des données au moment de la requête ?

Comme la Génération Statique se produit une seule fois au moment du build, elle n'est pas adaptée aux données qui sont fréquemment mises à jour ou qui changent à chaque requête utilisateur.

Dans de tels cas, où vos données sont susceptibles de changer, vous pouvez utiliser le Rendu côté serveur (Server-side Rendering). Apprenons-en plus sur le rendu côté serveur dans la section suivante.