Настройка getStaticProps для статической генерации страниц

Что такое статическая генерация страниц?

Статическая генерация — это процесс, при котором страницы вашего приложения создаются на этапе сборки (build time), а не при каждом запросе пользователя. Эти страницы генерируются один раз и затем кэшируются на сервере или CDN. Это невероятно быстро, потому что статические файлы уже готовы и не требуют обработки на сервере.

Разница между SSR и статической генерацией

Статическая генерация идеальна для страниц, контент которых не меняется часто (например, блог, портфолио или маркетинговая страница).

Как работает getStaticProps?

Функция getStaticProps вызывается во время сборки проекта. Она позволяет извлечь данные из внешнего источника (например, API или базы данных) и передать их в качестве пропсов к вашему компоненту.

Этот процесс выглядит так:

1. Вызов getStaticProps: Next.js вызывает эту функцию на этапе сборки.
2. Получение данных: вы извлекаете данные из API, файла или любой другой системы.
3. Передача данных в компонент: возвращаемый объект становится пропсами вашего компонента.

Реализация getStaticProps на практике

Давайте создадим простую страницу блога, где мы будем показывать список статей, полученных из фиктивного API.

Шаг 1: Создаем страницу Next.js

Создадим файл pages/blog.tsx. Это будет наша страница блога. Нам нужно подключить getStaticProps и использовать её для получения списка постов.

// pages/blog.tsx
import { GetStaticProps } from "next";

interface BlogPost {
  id: number;
  title: string;
  content: string;
}

interface BlogProps {
  posts: BlogPost[];
}

const Blog = ({ posts }: BlogProps) => {
  return (
    <div>
      <h1>Блог</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

// Функция для получения данных на этапе сборки
export const getStaticProps: GetStaticProps<BlogProps> = async () => {
  // Имитация API-запроса
  const posts: BlogPost[] = [
    { id: 1, title: "Пост 1", content: "Содержимое поста 1" },
    { id: 2, title: "Пост 2", content: "Содержимое поста 2" },
  ];

  // Возвращаем данные как пропсы компонента
  return {
    props: {
      posts,
    },
  };
};

export default Blog;

Разберём основные моменты:

1. getStaticProps возвращает объект с ключом props. Именно эти данные передаются в наш компонент.
2. Мы использовали интерфейсы TypeScript BlogPost и BlogProps для типизации данных.

Шаг 2: что происходит при сборке?

Когда вы запускаете команду npm run build, Next.js:

1. 1. Вызывает getStaticProps, чтобы получить список постов.
2. Создает статический HTML-файл для страницы блога со встроенными данными.

На этапе запроса от клиента сервер просто отдаёт уже готовый HTML-файл. Это молниеносно быстро!

Преимущества использования getStaticProps

1. Скорость: статические страницы загружаются быстрее, так как они уже созданы.
2. SEO: поскольку полный HTML генерируется на этапе сборки, поисковые системы могут индексировать его без проблем.
3. Кэширование: статические страницы прекрасно работают с CDN, что делает их доступными по всему миру.

Типизация данных с TypeScript

С TypeScript вы можете точно описать структуру данных, поступающих в getStaticProps. Это позволяет избежать ошибок и делает код более понятным.

Типизация API-ответов

Например, давайте предположим, что наши данные поступают из внешнего API:

import axios from "axios";

export const getStaticProps: GetStaticProps<BlogProps> = async () => {
  const { data } = await axios.get<BlogPost[]>("https://example.com/api/posts");

  return {
    props: {
      posts: data,
    },
  };
};

Здесь мы заранее указали, что наш API возвращает массив элементов типа BlogPost. Это гарантирует, что данные будут подходить под ожидаемую структуру.

Обработка ошибок

Что если API вернет ошибку? Вы можете обработать такие ситуации с помощью ключа notFound:

export const getStaticProps: GetStaticProps<BlogProps> = async () => {
  try {
    // Запрос к API
    const { data } = await axios.get<BlogPost[]>("https://example.com/api/posts");

    return {
      props: {
        posts: data,
      },
    };
  } catch (error) {
    // Если запрос не удался, возвращаем ошибку 404
    return {
      notFound: true,
    };
  }
};

При установке notFound: true Next.js рендерит страницу 404 для этого маршрута.

Общие ошибки и как их избежать

1. Отсутствие возвращаемых данных: если getStaticProps возвращает undefined, вы получите ошибку сборки. Убедитесь, что возвращаете объект с ключом props.
2. Проблемы с типизацией: всегда используйте строгую типизацию данных, особенно если работаете с внешними API.
3. Долгий ответ API: если ваш API медленный, сборка может стать излишне долгой. Пытайтесь минимизировать время отклика.

Ключевые моменты, которые стоит запомнить

• getStaticProps выполняется только один раз на этапе сборки.
• Эта функция идеально подходит для страниц с редко меняющимся контентом.
• Использование TypeScript упрощает работу с данными и уменьшает вероятность ошибок.
• Помните о кэшировании: статические страницы можно легко кэшировать на CDN, что улучшает производительность.