Rendu côté serveur (SSR) | Next.js

Également appelé "SSR" ou "Rendu dynamique".

Si une page utilise le rendu côté serveur (SSR), le HTML de la page est généré à chaque requête.

Pour utiliser le rendu côté serveur pour une page, vous devez exporter (export) une fonction async appelée getServerSideProps. Cette fonction sera appelée par le serveur à chaque requête.

Par exemple, supposons que votre page doive pré-rendre des données fréquemment mises à jour (récupérées depuis une API externe). Vous pouvez écrire getServerSideProps qui récupère ces données et les transmet à la Page comme ci-dessous :

export default function Page({ data }) {
  // Afficher les données...
}

// Cette fonction est appelée à chaque requête
export async function getServerSideProps() {
  // Récupérer les données depuis une API externe
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Transmettre les données à la page via les props
  return { props: { data } }
}

Comme vous pouvez le voir, getServerSideProps est similaire à getStaticProps, mais la différence est que getServerSideProps est exécuté à chaque requête au lieu de l'être au moment de la construction.

Pour en savoir plus sur le fonctionnement de getServerSideProps, consultez notre documentation sur la récupération de données.