getServerSideProps

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

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
}

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

Параметр context

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

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

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

props

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

export async function getServerSideProps(context) {
  return {
    props: { message: `Next.js это круто` }, // будет передано в компонент страницы как 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 }, // будет передано в компонент страницы как 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: {}, // будет передано в компонент страницы как props
  }
}

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