getServerSideProps

getServerSideProps est une fonction Next.js qui peut être utilisée pour récupérer des données et rendre le contenu d'une page au moment de la requête.

Exemple

Vous pouvez utiliser getServerSideProps en l'exportant depuis un composant de page. L'exemple ci-dessous montre comment récupérer des données depuis une API tierce dans getServerSideProps, et passer ces données à la page en tant que props :

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'

type Repo = {
  name: string
  stargazers_count: number
}

export const getServerSideProps = (async () => {
  // Récupération de données depuis une API externe
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()
  // Passage des données à la page via props
  return { props: { repo } }
}) satisfies GetServerSideProps<{ repo: Repo }>

export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

Quand utiliser getServerSideProps ?

Vous devriez utiliser getServerSideProps si vous avez besoin de rendre une page qui dépend de données utilisateur personnalisées, ou d'informations qui ne peuvent être connues qu'au moment de la requête. Par exemple, des en-têtes authorization ou une géolocalisation.

Si vous n'avez pas besoin de récupérer les données au moment de la requête, ou si vous préférez mettre en cache les données et le HTML pré-rendu, nous recommandons d'utiliser getStaticProps.

Comportement

• getServerSideProps s'exécute sur le serveur.
• getServerSideProps ne peut être exporté que depuis une page.
• getServerSideProps retourne du JSON.
• Lorsqu'un utilisateur visite une page, getServerSideProps sera utilisé pour récupérer les données au moment de la requête, et ces données seront utilisées pour rendre le HTML initial de la page.
• Les props passées au composant de page peuvent être visualisées côté client dans le HTML initial. Ceci permet à la page d'être hydratée correctement. Assurez-vous de ne pas passer d'informations sensibles qui ne devraient pas être disponibles côté client dans les props.
• Lorsqu'un utilisateur visite la page via next/link ou next/router, Next.js envoie une requête API au serveur, qui exécute getServerSideProps.
• Vous n'avez pas besoin d'appeler une Route API Next.js pour récupérer des données lorsque vous utilisez getServerSideProps, car la fonction s'exécute sur le serveur. À la place, vous pouvez appeler directement un CMS, une base de données, ou d'autres APIs tierces depuis getServerSideProps.

Bon à savoir :

• Consultez la référence API de getServerSideProps pour les paramètres et props utilisables avec getServerSideProps.
• Vous pouvez utiliser l'outil next-code-elimination pour vérifier ce que Next.js élimine du bundle côté client.

Gestion des erreurs

Si une erreur est levée dans getServerSideProps, la page pages/500.js sera affichée. Consultez la documentation sur la page 500 pour apprendre comment la créer. Durant le développement, cette page ne sera pas utilisée et un overlay d'erreur de développement sera affiché à la place.

Cas particuliers

Mise en cache avec le rendu côté serveur (SSR)

Vous pouvez utiliser des en-têtes de cache (Cache-Control) dans getServerSideProps pour mettre en cache des réponses dynamiques. Par exemple, en utilisant stale-while-revalidate.

// Cette valeur est considérée comme fraîche pendant dix secondes (s-maxage=10).
// Si une requête est répétée dans les 10 secondes suivantes, la valeur
// précédemment mise en cache sera toujours fraîche. Si la requête est répétée avant 59 secondes,
// la valeur mise en cache sera périmée mais toujours rendue (stale-while-revalidate=59).
//
// En arrière-plan, une requête de revalidation sera faite pour remplir le cache
// avec une nouvelle valeur. Si vous rafraîchissez la page, vous verrez la nouvelle valeur.
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}

Cependant, avant d'utiliser cache-control, nous recommandons de vérifier si getStaticProps avec ISR est plus adapté à votre cas d'usage.