> Зачем нужны функции getServerSideProps и getStaticProps в Next.js (JavaScript, Next.js, TypeScript)

Короткий ответ

getServerSideProps и getStaticProps - это функции для предварительной загрузки данных в Next.js. getServerSideProps выполняется на сервере при каждом запросе, обеспечивая актуальные данные для динамических страниц. getStaticProps выполняется на этапе сборки, генерируя статический HTML с данными, что даёт максимальную производительность и подходит для контента, который редко меняется.

Подробное объяснение

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

getStaticProps выполняется один раз при сборке приложения (или при ревалидации через revalidate). Результат - статический HTML-файл, который кешируется CDN и отдаётся мгновенно. Это идеально для блогов, документации или страниц с данными, которые обновляются нечасто. Для частичного обновления статического контента используется Incremental Static Regeneration (ISR) с параметром revalidate.

Выбор между ними - это trade-off между производительностью и актуальностью данных. getServerSideProps подходит для персонализированных страниц (например, дашборд пользователя), а getStaticProps - для публичного контента.

На практике

В реальных проектах getStaticProps часто комбинируют с getStaticPaths для динамических маршрутов. Например, для блога: getStaticPaths генерирует список всех постов, а getStaticProps загружает данные для каждого. Если контент обновляется раз в час, можно использовать revalidate: 3600.

getServerSideProps применяют, когда данные зависят от запроса (например, req.headers для определения локали) или требуют авторизации. Важно помнить, что код в этих функциях выполняется только на сервере, поэтому там можно безопасно работать с секретами (API keys, токены).

Пример кода

TYPESCRIPT
// Страница с getStaticProps и ISR
import { GetStaticProps } from 'next'

interface Post {
  id: number
  title: string
}

export const getStaticProps: GetStaticProps<{ post: Post }> = async () => {
  const res = await fetch('https://api.example.com/post/1')
  const post: Post = await res.json()

  return {
    props: { post },
    revalidate: 60, // регенерация не чаще раза в минуту
  }
}

// Страница с getServerSideProps
import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps<{ user: any }> = async (context) => {
  const { req } = context
  const token = req.cookies.auth
  const res = await fetch('https://api.example.com/user', {
    headers: { Authorization: `Bearer ${token}` },
  })
  const user = await res.json()

  return {
    props: { user },
  }
}

Как отвечать на собеседовании

Начни с краткого определения каждой функции, затем объясни ключевые различия: время выполнения (build time vs request time), производительность, актуальность данных. Приведи конкретные сценарии использования: для getStaticProps - статический контент, для getServerSideProps - динамические данные, зависящие от пользователя. Упомяни ISR как компромиссный вариант. Если спросят про getInitialProps (устаревший метод), объясни, почему его не стоит использовать в новых проектах.

Что проверяет интервьюер

Интервьюер оценивает понимание архитектуры Next.js и умение выбирать правильный подход под задачу. Важно показать знание trade-off'ов между производительностью и актуальностью, а также понимание, как работают серверный рендеринг и статическая генерация. Дополнительно проверяется знание TypeScript-типизации этих функций и обработки ошибок (например, возврат notFound: true).

Типичные ошибки

• Использование getServerSideProps для данных, которые можно сделать статическими, что ухудшает производительность.
• Попытка использовать getStaticProps для персонализированных данных - это невозможно, так как страница общая для всех пользователей.
• Забывание про revalidate при ISR, что приводит к бесконечному кешированию или отсутствию обновлений.
• Неправильная типизация: не указаны типы для props или контекста, что ломает TypeScript-проверки.
• Игнорирование обработки ошибок: если fetch упадёт, страница может вернуть 500 без понятного сообщения.