getServerSideProps

getServerSideProps — это функция Next.js, которая может использоваться для получения данных и рендеринга содержимого страницы во время запроса.

Пример

Вы можете использовать getServerSideProps, экспортировав её из компонента страницы. Пример ниже демонстрирует, как получить данные из API стороннего сервиса в 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 если вам необходимо отобразить страницу, которая зависит от персонализированных пользовательских данных или информации, доступной только во время запроса. Например, authorization заголовков или геолокации.

Если вам не нужно получать данные во время запроса или вы предпочитаете кэшировать данные и предварительно рендерить HTML, мы рекомендуем использовать getStaticProps.

Поведение

• getServerSideProps выполняется на сервере.
• getServerSideProps может быть экспортирована только из страницы.
• getServerSideProps возвращает JSON.
• При посещении страницы пользователем, getServerSideProps будет использоваться для получения данных во время запроса, и эти данные будут использованы для рендеринга начального HTML страницы.
• props, переданные компоненту страницы, могут быть просмотрены на клиенте как часть начального HTML. Это позволяет странице корректно гидратироваться. Убедитесь, что вы не передаёте в props никакую конфиденциальную информацию, которая не должна быть доступна на клиенте.
• Когда пользователь посещает страницу через next/link или next/router, Next.js отправляет запрос на сервер, который выполняет getServerSideProps.
• Вам не нужно вызывать Next.js маршрут API для получения данных при использовании getServerSideProps, поскольку функция выполняется на сервере. Вместо этого, вы можете напрямую вызывать API CMS, базы данных или других сторонних сервисов изнутри getServerSideProps.

Важно:

• Обратитесь к getServerSideProps справке по API для параметров и свойств, которые можно использовать с getServerSideProps.
• Вы можете использовать инструмент next-code-elimination для проверки, что Next.js удаляет из клиентской сборки.

Обработка ошибок

Если внутри getServerSideProps возникает ошибка, будет отображаться файл pages/500.js. Прочитайте документацию по странице 500, чтобы узнать больше о её создании. Во время разработки этот файл не будет использоваться, и вместо него будет показано диалоговое окно с ошибкой.

Особые случаи

Edge среда выполнения

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

Однако в настоящее время в Edge среде выполнения у вас нет доступа к объекту ответа. Это означает, что вы не можете, например, добавлять куки в getServerSideProps. Чтобы получить доступ к объекту ответа, вам следует продолжить использовать Node.js среду выполнения, которая является средой выполнения по умолчанию.

Вы можете явно установить среду выполнения для каждой страницы, изменив config, например:

export const config = {
  runtime: 'nodejs', // or "edge"
}
 
export const getServerSideProps = async () => {}

Кэширование с рендерингом на стороне сервера (SSR)

Вы можете использовать заголовки кэширования (Cache-Control) внутри getServerSideProps для кэширования динамических ответов. Например, используя stale-while-revalidate.

// This value is considered fresh for ten seconds (s-maxage=10).
// If a request is repeated within the next 10 seconds, the previously
// cached value will still be fresh. If the request is repeated before 59 seconds,
// the cached value will be stale but still render (stale-while-revalidate=59).
//
// In the background, a revalidation request will be made to populate the cache
// with a fresh value. If you refresh the page, you will see the new value.
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )
 
  return {
    props: {},
  }
}

Однако, прежде чем прибегать к cache-control, рекомендуем проверить, не является ли getStaticProps с ISR более подходящим вариантом для вашего случая.