getServerSideProps

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

Пример

Вы можете использовать getServerSideProps, экспортировав её из компонента страницы. В примере ниже показано, как можно получить данные из стороннего API в getServerSideProps и передать их на страницу через пропсы:

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'

type Repo = {
  name: string
  stargazers_count: number
}

export const getServerSideProps = (async () => {
  // Получаем данные из внешнего API
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()
  // Передаём данные на страницу через пропсы
  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() {
  // Получаем данные из внешнего API
  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 (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

Когда следует использовать getServerSideProps?

Используйте getServerSideProps, если вам нужно рендерить страницу, которая зависит от персональных данных пользователя или информации, доступной только во время запроса. Например, заголовки authorization или геолокация.

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

Поведение

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

Полезно знать:

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

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

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

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

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

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

// Это значение считается актуальным в течение десяти секунд (s-maxage=10).
// Если запрос повторяется в течение следующих 10 секунд, будет использоваться
// закешированное значение. Если запрос повторяется в течение 59 секунд,
// закешированное значение будет устаревшим, но всё равно отобразится (stale-while-revalidate=59).
//
// На фоне будет выполнен запрос на повторную валидацию, чтобы обновить кеш
// новым значением. Если обновить страницу, вы увидите новое значение.
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}

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