Рендеринг на стороне сервера (SSR)

Также известен как "SSR" или "Динамический рендеринг".

Если страница использует рендеринг на стороне сервера (SSR), её HTML-код генерируется при каждом запросе.

Чтобы использовать SSR для страницы, необходимо экспортировать async-функцию с именем getServerSideProps. Сервер будет вызывать эту функцию при каждом запросе.

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

export default function Page({ data }) {
  // Рендеринг данных...
}

// Эта функция вызывается при каждом запросе
export async function getServerSideProps() {
  // Получение данных из внешнего API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Передача данных странице через props
  return { props: { data } }
}

Как видите, getServerSideProps похожа на getStaticProps, но разница в том, что getServerSideProps выполняется при каждом запросе, а не во время сборки.

Чтобы узнать больше о работе getServerSideProps, ознакомьтесь с нашей документацией по получению данных.