Что такое getStaticProps?

Что такое getStaticProps

getStaticProps — это функция Next.js, которая позволяет предварительно генерировать страницы во время сборки, а не при каждом запросе пользователя. Это один из столпов Next.js для оптимизации производительности.

Основная концепция

getStaticProps выполняется только на сервере при сборке (во время npm run build), а не при каждом запросе от пользователя. Это значит:

• Страница генерируется один раз
• HTML кешируется на сервере/CDN
• Пользователи получают готовый HTML (очень быстро)
• Нет задержек на выполнение кода

// pages/blog/[slug].js
export async function getStaticProps(context) {
  // Выполняется при сборке, НЕ при каждом запросе
  const { params } = context;
  
  // Получи данные из БД или API
  const post = await fetchPost(params.slug);
  
  // Вернуть данные странице
  return {
    props: {
      post,
    },
    revalidate: 3600, // Регенерировать каждый час
  };
}

export async function getStaticPaths() {
  // Укажи какие страницы генерировать
  return {
    paths: [
      { params: { slug: first-post } },
      { params: { slug: second-post } },
    ],
    fallback: true, // Генерировать новые страницы по требованию
  };
}

export default function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

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

Процесс сборки:

1. npm run build вызывает getStaticProps
2. Next.js получает данные (из БД, API, файлов)
3. Генерирует HTML файл
4. Сохраняет его на диск
5. При запросе пользователя сервер отдает готовый HTML

npm run build
   |
   v
getStaticProps() запускается
   |
   v
Получи данные (SQL, API запрос)
   |
   v
Генерируй HTML
   |
   v
.next/server/app/blog/[slug].html (кешированный файл)
   |
   v
Пользователь запрашивает /blog/my-post
   |
   v
Сервер отдает готовый HTML (0ms задержек!)

Сравнение с getServerSideProps

getStaticProps (Static Generation):

• Выполняется при сборке
• HTML генерируется один раз
• Очень быстро для пользователей
• Данные могут быть устаревшими

// getStaticProps — боевая оптимизация
export async function getStaticProps() {
  const posts = await db.posts.findAll();
  return {
    props: { posts },
    revalidate: 3600, // Обнови данные каждый час
  };
}

getServerSideProps (Server-Side Rendering):

• Выполняется при каждом запросе
• Свежие данные всегда
• Медленнее для пользователей
• Нагрузка на сервер

// getServerSideProps — для свежих данных
export async function getServerSideProps() {
  const user = await getCurrentUser(); // При каждом запросе
  return {
    props: { user },
  };
}

Выбор:

• getStaticProps: статический контент, блоги, документация
• getServerSideProps: личный кабинет, данные в реальном времени

Incremental Static Regeneration (ISR)

getStaticProps поддерживает Incremental Static Regeneration через параметр revalidate. Это позволяет обновлять кешированные страницы без пересборки:

export async function getStaticProps() {
  const data = await expensiveDataFetch();
  
  return {
    props: { data },
    revalidate: 60, // Регенерировать каждые 60 секунд
  };
}

Процесс ISR:

Первый запрос в 00:00
  |
  v
getStaticProps выполняется
  |
  v
HTML кешируется
  |
  v
Просмотры в 00:00-00:59: из кеша (моментально)
  |
  v
Первый запрос в 01:00
  |
  v
getStaticProps выполняется в фоне
  |
  v
Пользователь получает старый HTML, но кеш обновляется
  |
  v
Следующие просмотры получают новый HTML

getStaticPaths для динамических маршрутов

Для динамических страниц (например, блог-посты) нужно указать какие маршруты генерировать:

// pages/products/[id].js
export async function getStaticPaths() {
  // Получи список продуктов
  const products = await fetchProducts();
  
  // Генерируй страницы только для популярных продуктов
  const paths = products
    .filter(p => p.views > 1000)
    .map(p => ({
      params: { id: p.id.toString() },
    }));
  
  return {
    paths,
    fallback: blocking, // Генерируй новые при запросе
  };
}

export async function getStaticProps({ params }) {
  const product = await fetchProduct(params.id);
  return {
    props: { product },
    revalidate: 3600,
  };
}

export default function Product({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>Price: ${product.price}</p>
    </div>
  );
}

Параметр fallback

fallback: false

• Только пути из getStaticPaths генерируются
• Другие маршруты = 404
• Быстро для известного контента

return {
  paths: [{ params: { id: 1 } }, { params: { id: 2 } }],
  fallback: false, // Только эти страницы
};

fallback: true

• Страницы генерируются по требованию
• Пользователь видит загрузку, затем контент
• Медленнее при первом запросе нового маршрута

return {
  paths: [],
  fallback: true, // Генерируй все динамические страницы
};

fallback: blocking

• Генерируй в фоне перед отправкой HTML
• Пользователь ждет готовый HTML
• Не видит сообщение о загрузке

return {
  paths: [],
  fallback: blocking, // Ждем генерации
};

Реальный пример: блог

// pages/posts/[slug].js
import { getAllPostSlugs, getPost } from @/lib/posts;

export async function getStaticPaths() {
  const slugs = await getAllPostSlugs();
  
  return {
    paths: slugs.map(slug => ({
      params: { slug },
    })),
    fallback: blocking,
  };
}

export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);
  
  if (!post) {
    return { notFound: true };
  }
  
  return {
    props: { post },
    revalidate: 86400, // Один день
  };
}

export default function Post({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <time>{post.date}</time>
      <div>{post.content}</div>
    </article>
  );
}

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

ИСПОЛЬЗУЙ когда:

• Контент не меняется часто (блоги, документация)
• Количество страниц известно и конечно
• Нужна максимальная производительность
• Данные можно получить при сборке

// Отличный кейс для getStaticProps
// Документация, где обновления редкие
export async function getStaticProps() {
  const docs = await fetchDocumentation();
  return {
    props: { docs },
    revalidate: 86400,
  };
}

НЕ ИСПОЛЬЗУЙ когда:

• Данные постоянно меняются (чат, лента)
• Нужны свежие данные всегда
• Много динамических маршрутов
• Зависит от информации о пользователе

// Плохой кейс для getStaticProps
// Личный кабинет пользователя
// Используй getServerSideProps вместо этого

Преимущества getStaticProps

1. Производительность: HTML готов, нет задержек
2. CDN: статические файлы кешируются везде
3. Безопасность: нет доступа к БД при запросе
4. SEO: готовый HTML полностью индексируется
5. Масштабируемость: никаких вычислений при запросе

Вывод

• getStaticProps = Static Generation, генерируй при сборке
• getStaticPaths = укажи какие маршруты генерировать
• revalidate = обновляй кеш через интервал (ISR)
• Лучшее решение: используй для статического контента, чтобы максимизировать производительность