getServerSideProps

Lorsque vous exportez une fonction appelée getServerSideProps (Rendu côté serveur) depuis une page, Next.js pré-rendra cette page à chaque requête en utilisant les données retournées par getServerSideProps. Ceci est utile si vous souhaitez récupérer des données qui changent fréquemment et que vous voulez que la page affiche les données les plus récentes.

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 les 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 les props
  return { props: { repo } }
}

export default function Page({ repo }) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

Vous pouvez importer des modules dans la portée globale pour les utiliser dans getServerSideProps. Les imports utilisés ne seront pas inclus dans le bundle côté client. Cela signifie que vous pouvez écrire du code côté serveur directement dans getServerSideProps, y compris la récupération de données depuis votre base de données.

Paramètre context

Le paramètre context est un objet contenant les clés suivantes :

Valeurs de retour de getServerSideProps

La fonction getServerSideProps doit retourner un objet avec une des propriétés suivantes :

props

L'objet props est une paire clé-valeur, où chaque valeur est reçue par le composant de page. Il doit s'agir d'un objet sérialisable afin que toutes les props passées puissent être sérialisées avec JSON.stringify.

export async function getServerSideProps(context) {
  return {
    props: { message: `Next.js est génial` }, // sera passé au composant de page comme props
  }
}

notFound

Le booléen notFound permet à la page de retourner un statut 404 et une Page 404. Avec notFound: true, la page retournera un 404 même si une page avait été générée avec succès auparavant. Ceci est destiné à supporter des cas d'usage comme du contenu généré par l'utilisateur qui serait supprimé par son auteur.

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: { data }, // sera passé au composant de page comme props
  }
}

redirect

L'objet redirect permet de rediriger vers des ressources internes ou externes. Il doit correspondre à la forme { destination: string, permanent: boolean }. Dans certains cas rares, vous pourriez avoir besoin d'assigner un code de statut personnalisé pour que les anciens clients HTTP redirigent correctement. Dans ces cas, vous pouvez utiliser la propriété statusCode à la place de permanent, mais pas les deux.

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }

  return {
    props: {}, // sera passé au composant de page comme props
  }
}

Historique des versions