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 les 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érer les données depuis une API externe
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()
  // Passer les 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>
  )
}

export async function getServerSideProps() {
  // Récupérer les données depuis une API externe
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  // Passer les données à la page via props
  return { props: { repo } }
}

export default function Page({ repo }) {
  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.
Quand 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 sont 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.
Quand 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 puisque la fonction s'exécute sur le serveur. À la place, vous pouvez appeler directement un CMS, une base de données ou d'autres API 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 de la page 500 pour en savoir plus sur sa création. Pendant le développement, cette page ne sera pas utilisée et l'overlay d'erreur de développement sera affiché à la place.

Cas particuliers

Runtime Edge

getServerSideProps peut être utilisé avec les Runtimes Serverless et Edge, et vous pouvez définir des props dans les deux.

Cependant, actuellement dans le Runtime Edge, vous n'avez pas accès à l'objet response. Cela signifie que vous ne pouvez pas - par exemple - ajouter des cookies dans getServerSideProps. Pour avoir accès à l'objet response, vous devriez continuer à utiliser le runtime Node.js, qui est le runtime par défaut.

Vous pouvez définir explicitement le runtime pour une page spécifique en modifiant la config, par exemple :

pages/index.js

export const config = {
  runtime: 'nodejs', // ou "edge"
}

export const getServerSideProps = async () => {}

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

Vous pouvez utiliser les en-têtes de cache (Cache-Control) dans getServerSideProps pour mettre en cache les 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 actualisez 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 voir si getStaticProps avec ISR est plus adapté à votre cas d'utilisation.