Что такое getServerSideProps?

getServerSideProps в Next.js

getServerSideProps — это функция в Next.js (Pages Router), которая выполняется на сервере при каждом запросе страницы и передаёт данные в компонент перед отправкой HTML клиенту. Это Server-Side Rendering (SSR).

Как это работает

1. Пользователь запрашивает страницу
2. Next.js выполняет getServerSideProps НА СЕРВЕРЕ
3. Функция может делать запросы к БД, API, читать переменные окружения
4. Результат передаётся в компонент как props
5. Next.js отправляет уже заполненный HTML браузеру
6. Компонент рендерится с данными на клиенте

Пример

// pages/blog/[slug].js
export async function getServerSideProps(context) {
  const { slug } = context.params;
  const { req, res } = context;

  // Запрос к API или БД
  const response = await fetch(`https://api.example.com/posts/${slug}`);
  const post = await response.json();

  // Установка заголовков кэша
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=3600, stale-while-revalidate=86400'
  );

  if (!post) {
    return { notFound: true }; // Вернёт 404
  }

  return {
    props: {
      post,
      generatedAt: new Date().toISOString(),
    },
    revalidate: 3600, // Revalidate каждый час (ISR)
  };
}

export default function PostPage({ post, generatedAt }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <p>Generated: {generatedAt}</p>
    </div>
  );
}

Важные параметры

• props — объект с данными для компонента
• revalidate — время в секундах для Incremental Static Regeneration (ISR)
• notFound — возвращает 404 страницу
• redirect — перенаправляет на другой URL

getServerSideProps vs getStaticProps

Плюсы

• Свежие данные — всегда актуальные на момент запроса
• Безопасность — API ключи и секреты НЕ попадают в клиент
• SEO — HTML полностью заполнен, хорошо для поисковиков
• Personalization — можно отправить разные данные для разных пользователей

Минусы

• Медленнее — каждый запрос ждёт выполнения функции
• Нагрузка на сервер — много времени на обработку
• TTFB высокий — Time To First Byte может быть большой
• Масштабируемость — сложнее масштабировать

Когда использовать

• Личный кабинет пользователя
• Данные, которые меняются часто
• Нужна authentication/authorization
• Dynamic pricing или personalized content

В App Router (современный Next.js)

getServerSideProps больше НЕ существует. Вместо этого используются Server Components:

// app/blog/[slug]/page.js
export default async function PostPage({ params }) {
  const response = await fetch(
    `https://api.example.com/posts/${params.slug}`,
    { cache: 'no-store' } // Всегда свежие данные
  );
  const post = await response.json();

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Это более простой и мощный подход — весь код выполняется на сервере, данные передаются в компонент, и отправляется готовый HTML.