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

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: ДиджиталСектор, Kodix

Стек: JavaScript, Next.js, TypeScript

> Пример ответа

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

getStaticProps используется для статической генерации (SSG). Данные загружаются один раз на этапе сборки (build time). Страница превращается в статический HTML, который может быть кэширован CDN. Идеально подходит для контента, который редко меняется: блоги, документация, лендинги. Пример:

TYPESCRIPT
export const getStaticProps: GetStaticProps = async () => {
  const data = await fetch('https://api.example.com/posts');
  return { props: { posts: await data.json() } };
};

getServerSideProps используется для серверного рендеринга (SSR). Данные загружаются при каждом запросе к странице. Это необходимо для динамического контента, который зависит от пользователя (например, авторизация) или часто обновляется (дашборды, персонализированные страницы). Пример:

TYPESCRIPT
export const getServerSideProps: GetServerSideProps = async (context) => {
  const userId = context.params?.id;
  const data = await fetch(`https://api.example.com/user/${userId}`);
  return { props: { user: await data.json() } };
};

Ключевые различия:

Время выполнения: getStaticProps - на сборке, getServerSideProps - на каждый запрос.
Производительность: SSG быстрее (статический HTML), SSR медленнее (серверная обработка).
Кэширование: SSG легко кэшируется, SSR требует дополнительной настройки (например, stale-while-revalidate).
Доступ к запросу: getServerSideProps получает объект context (req, res, params), getStaticProps - только params и preview.

Выбор между ними зависит от требований к актуальности данных и скорости загрузки. Для большинства статичных сайтов предпочтительнее getStaticProps, для динамических - getServerSideProps.