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. Это необходимо для корректной гидратации (hydration). Убедитесь, что вы не передаёте в пропсах чувствительную информацию, которая не должна быть доступна на клиенте.
• Когда пользователь переходит на страницу через next/link или next/router, Next.js отправляет API-запрос на сервер, который выполняет getServerSideProps.
• Вам не нужно вызывать API Route Next.js для получения данных при использовании getServerSideProps, так как функция выполняется на сервере. Вместо этого вы можете напрямую обращаться к CMS, базе данных или другим сторонним API из getServerSideProps.

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

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

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

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

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

Edge Runtime

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

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

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

export const config = {
  runtime: 'nodejs', // или "edge"
}

export const getServerSideProps = async () => {}

Кэширование при серверном рендеринге (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 для вашего случая лучше.