getServerSideProps

При экспорте функции, называемой getServerSideProps (рендеринг на стороне сервера), из страницы, Next.js предварительно рендерит эту страницу при каждом запросе, используя данные, возвращённые getServerSideProps. Это полезно, если вам нужно получать данные, которые часто меняются, и обновлять страницу, чтобы отобразить самые свежие данные.

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getServerSideProps = (async () => {
  // Fetch data from external API
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()
  // Pass data to the 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>
  )
}

Вы можете импортировать модули в глобальной области видимости для использования в getServerSideProps. Импортированные модули не будут скомпилированы для клиентской стороны. Это означает, что вы можете писать серверный код напрямую в getServerSideProps, включая получение данных из вашей базы данных.

Параметр контекста

Параметр context представляет собой объект, содержащий следующие ключи:

Возвращаемые значения getServerSideProps

Функция getServerSideProps должна возвращать объект с любым из следующих свойств:

props

Объект props представляет собой пару ключ-значение, где каждое значение передаётся компоненту страницы. Он должен быть сериализуемым объектом, чтобы любые переданные свойства можно было сериализовать с помощью JSON.stringify.

export async function getServerSideProps(context) {
  return {
    props: { message: `Next.js is awesome` }, // will be passed to the page component as props
  }
}

notFound

Логическое значение notFound позволяет странице возвращать статус 404 и страница 404. С notFound: true, страница вернёт 404 даже если ранее была успешно сгенерирована страница. Это предназначено для поддержки случаев, когда пользовательский контент удаляется его автором.

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  if (!data) {
    return {
      notFound: true,
    }
  }
 
  return {
    props: { data }, // will be passed to the page component as props
  }
}

redirect

Объект redirect позволяет перенаправлять на внутренние и внешние ресурсы. Он должен соответствовать форме { destination: string, permanent: boolean }. В редких случаях вам может потребоваться назначить пользовательский код состояния для старых HTTP клиентов, чтобы правильно перенаправить. В этих случаях вы можете использовать свойство statusCode вместо свойства permanent, но не оба.

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: {}, // will be passed to the page component as props
  }
}

История версий