Статическая генерация сайта (SSG)

Если страница использует статическую генерацию, HTML страницы генерируется во время создания сборки. Это означает, что в производстве HTML страницы генерируется, когда вы выполняете next build. Этот HTML затем будет повторно использован при каждом запросе. Он может быть кэширован CDN.

В Next.js вы можете статически генерировать страницы с данными или без них. Давайте рассмотрим каждый случай.

Статическая генерация без данных

По умолчанию Next.js предварительно рендерит страницы, используя статическую генерацию без получения данных. Вот пример:

function About() {
  return <div>About</div>
}
 
export default About

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

Статическая генерация с данными

Некоторые страницы требуют получения внешних данных для предварительного рендеринга. Есть два сценария, и один или оба могут применяться. В каждом случае вы можете использовать эти функции, которые предоставляет Next.js:

1. Содержание вашей страницы зависит от внешних данных: Используйте getStaticProps.
2. Пути вашей страницы зависят от внешних данных: Используйте getStaticPaths (обычно в дополнение к getStaticProps).

Сценарий 1: Содержание вашей страницы зависит от внешних данных

Пример: Страница вашего блога может потребовать получения списка статей блога из CMS (системы управления контентом).

// TODO: Need to fetch `posts` (by calling some API endpoint)
//       before this page can be pre-rendered.
export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

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

export default function Blog({ posts }) {
  // Render posts...
}
 
// This function gets called at build time
export async function getStaticProps() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

Чтобы узнать больше о том, как работает getStaticProps , ознакомьтесь с документацией по работе с данными Получение статических свойств.

Сценарий 2: Пути вашей страницы зависят от внешних данных

Next.js позволяет вам создавать страницы с динамическими маршрутами. Например, вы можете создать файл под названием pages/posts/[id].js для отображения одной статьи блога на основе id. Это позволит вам отобразить статью блога с id: 1 при обращении по адресу posts/1.

Чтобы узнать больше о динамическом маршрутировании, ознакомьтесь с документацией по Динамическим маршрутам.

Однако, какие id вы хотите предварительно рендерить во время создания сборки, могут зависеть от внешних данных.

Пример: предположим, что вы добавили только одну статью (с id: 1) в базу данных. В этом случае вы хотите предварительно рендерить только posts/1 во время создания сборки.

В дальнейшем вы можете добавить вторую статью с id: 2. Тогда вам нужно будет предварительно рендерить и posts/2.

Таким образом, пути страниц, которые предварительно рендерятся, зависят от внешних данных. Для обработки этого Next.js позволяет export функцию getStaticPaths из динамической страницы (в данном случае pages/posts/[id].js). Эта функция вызывается во время создания сборки и позволяет указать, какие пути вы хотите предварительно рендерить.

// This function gets called at build time
export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))
 
  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false }
}

Также в pages/posts/[id].js, вам необходимо экспортировать getStaticProps , чтобы получить данные о статье с помощью этого id и использовать их для предварительного рендеринга страницы:

export default function Post({ post }) {
  // Render post...
}
 
export async function getStaticPaths() {
  // ...
}
 
// This also gets called at build time
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()
 
  // Pass post data to the page via props
  return { props: { post } }
}

Чтобы узнать больше о том, как работает getStaticPaths , ознакомьтесь с документацией по работе с данными Получение статических путей.

Когда использовать статическую генерацию?

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

Вы можете использовать статическую генерацию для многих типов страниц, включая:

• Страницы маркетинга
• Статьи блога и портфолио
• Списки товаров интернет-магазина
• Справочная информация и документация

Вы должны спросить себя: «Могу ли я предварительно рендерить эту страницу заранее до запроса пользователя?» Если ответ да, то вы должны выбрать статическую генерацию.

С другой стороны, статическая генерация — не лучшая идея, если вы не можете предварительно рендерить страницу до запроса пользователя. Возможно, ваша страница отображает часто обновляемые данные, и содержимое страницы меняется при каждом запросе.

В таких случаях вы можете сделать следующее:

• Используйте статическую генерацию с получением данных на стороне клиента: Вы можете пропустить предварительный рендеринг некоторых частей страницы и затем использовать JavaScript на стороне клиента для их заполнения. Чтобы узнать больше об этом подходе, ознакомьтесь с документацией по Обработке данных на стороне клиента.
• Используйте рендеринг на стороне сервера: Next.js предварительно рендерит страницу при каждом запросе. Это будет медленнее, потому что страница не может быть кэширована CDN, но предварительно рендеренная страница всегда будет актуальной. Мы поговорим об этом подходе ниже.