getServerSideProps

Lorsque vous exportez une fonction appelée getServerSideProps (Rendu côté serveur ou SSR) 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 (context) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}) satisfies GetServerSideProps<{
  repo: Repo
}>

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

export async function getServerSideProps() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}

export default function Page({ repo }) {
  return repo.stargazers_count
}

Vous pouvez importer des modules dans la portée de niveau supérieur 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 retournées par 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 la page. Il doit s'agir d'un objet sérialisable afin que toutes les propriétés 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 a é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 et 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 la propriété 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