Создание статических сайтов (SSG) решает большинство проблем, связанных со стратегией SSR и CSR, но подходит для рендеринга в основном статического контента. Это накладывает ограничения, когда отображаемый контент является динамическим или часто меняется.

Если вы не читали мою предыдущую статью о Стратегии создания статических сайтов (SSG) с Next.js, я настоятельно рекомендую пройти ее один раз, а затем продолжить эту статью, так как это поможет вам понять концепцию в целом и понять Почему возникла ISG.

Подумайте о растущем блоге с несколькими сообщениями. Возможно, вы не захотите перестраивать и повторно развертывать сайт только потому, что хотите исправить опечатку в одном из сообщений. Точно так же одна новая запись в блоге не должна требовать перестройки всех существующих страниц. Таким образом, одного SSG недостаточно для рендеринга больших веб-сайтов или приложений.

Шаблон Incremental Static Generation (ISG) был представлен как обновление SSG, чтобы помочь решить проблему динамических данных и помочь статическим сайтам масштабироваться для больших объемов часто меняющихся данных. ISG позволяет обновлять существующие страницы и добавлять новые путем предварительного рендеринга подмножества страниц в фоновом режиме даже при поступлении новых запросов на страницы.

Инкрементное создание сайта (ISG) помогает в двух сценариях поэтапно добавлять обновления к существующему статическому сайту после его создания.

  1. Позволяет добавлять новые страницы на ваш веб-сайт.
  2. Позволяет обновлять существующие страницы вашего веб-сайта, что также известно как добавочная статическая генерация "Re".

Добавление новых страниц

Одна из популярных концепций, называемая отложенной загрузкой, используется для включения новых страниц на веб-сайт после завершения сборки. Это означает, что новая страница генерируется сразу по первому запросу. Во время генерации пользователю во внешнем клиенте может быть показан резервный механизм, т. е. страница или индикатор загрузки. Сравните это со сценарием SSG, где страница с ошибкой 404 была показана здесь как запасной вариант для несуществующих страниц на веб-сайте.

Давайте теперь посмотрим на приведенный ниже код Next.js, необходимый для ленивой загрузки несуществующей страницы с помощью ISG.

// In getStaticPaths(), you need to return the list of
// ids of product pages (/products/[id]) that you'd
// like to pre-render at build time. To do so,
// you can fetch all products from a database.
export async function getStaticPaths() {
  const products = await getProductsFromDatabase();

  const paths = products.map((product) => ({
     params: { id: product.id }
  }));


  // fallback: true means that the missing pages
  // will not 404, and instead can render a fallback.
  return { paths, fallback: true };
}

// params will contain the id for each generated page.
export async function getStaticProps({ params }) {
  return {
    props: {
      product: await getProductFromDatabase(params.id)
    }
  }
}


export default function Product({ product }) {
  const router = useRouter();

  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  // Render product
}

Здесь мы использовали fallback: true. Теперь, если страница, соответствующая определенному продукту, недоступна, мы показываем резервную версию страницы, например, индикатор загрузки, как показано выше в функции «Продукт». Тем временем Next.js будет генерировать страницу в фоновом режиме. После создания он будет кэширован и показан вместо резервной страницы.

Кэшированная версия страницы теперь будет показана всем последующим посетителям сразу по запросу. Как для новых, так и для существующих страниц мы можем установить срок действия, когда Next.js должен перепроверить и обновить его. Этого можно добиться, используя свойство revalidate, как показано в следующем разделе.

Обновить существующие страницы веб-сайта

Чтобы повторно отобразить существующую страницу, для страницы определяется подходящий тайм-аут. Это обеспечит повторную проверку страницы по истечении заданного периода времени ожидания. Тайм-аут может быть установлен до 1 секунды. Пользователь будет продолжать видеть предыдущую версию страницы, пока страница не завершит повторную проверку.

Таким образом, ISG использует стратегию stale-while-revalidate, при которой пользователь получает кэшированную или устаревшую версию, пока происходит повторная проверка. Повторная проверка выполняется полностью в фоновом режиме без необходимости полной перестройки.

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

// This function runs at build time on the build server
export async function getStaticProps() {
  return {
    props: {
      products: await getProductsFromDatabase(),
      revalidate: 10, // This will force the page to revalidate after 10 seconds
    }
  }
}

// The page component receives products prop from getStaticProps at build time
export default function Products({ products }) {
  return (
    <>
      <h1>Products</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </>
  )
}

Код для повторной проверки страницы каждые 10 секунд включен в функцию getStaticProps(). Когда приходит запрос, сначала обслуживается доступная статическая страница. Каждые 10 секунд статическая страница обновляется в фоновом режиме с новыми данными. После создания новая версия статического файла становится доступной и будет использоваться для любых новых запросов в следующую минуту.

Эта функция доступна в Next.js 9.5 и выше.

Преимущества инкрементной статической генерации (ISG)

Инкрементная статическая генерация (ISG) — это расширение статической генерации сайта (SSG), которое позволяет обновлять динамическое содержимое во время сборки без повторной генерации всего сайта. Вот некоторые преимущества использования ISG:

  1. Более быстрая сборка: ISG позволяет сократить время сборки, обновляя только содержимое, которое изменилось с момента последней сборки. Это может быть особенно полезно для сайтов с большим объемом динамического контента, который часто меняется.
  2. Улучшение SEO: ISG позволяет быстрее обновлять контент, что может улучшить рейтинг в поисковых системах за счет предоставления более свежего контента.
  3. Улучшенный пользовательский интерфейс: ISG позволяет предварительно отображать больше динамического контента во время сборки, что может улучшить взаимодействие с пользователем за счет уменьшения необходимости рендеринга на стороне клиента.
  4. Снижение затрат: ISG может снизить затраты на сервер, позволяя предварительно отображать больше контента во время сборки, уменьшая потребность в рендеринге на стороне сервера.
  5. Улучшенная масштабируемость: ISG позволяет предварительно отображать больше контента во время сборки, что может улучшить масштабируемость за счет снижения нагрузки на сервер.

В целом ISG предлагает множество преимуществ по сравнению с традиционным SSG, особенно для веб-сайтов, ориентированных на контент, которые требуют частых обновлений. Это позволяет ускорить сборку, улучшить поисковую оптимизацию и улучшить взаимодействие с пользователем при одновременном снижении затрат и улучшении масштабируемости.

Недостатки инкрементной статической генерации (ISG)

Хотя инкрементная статическая генерация (ISG) имеет много преимуществ, следует учитывать и некоторые потенциальные недостатки:

  1. Повышенная сложность: ISG может усложнить процесс сборки, особенно если необходимо обновить множество различных типов динамического содержимого.
  2. Более длительное время сборки: хотя ISG может ускорить время сборки для измененного контента, она также может увеличить общее время сборки, если есть много типов динамического контента, которые необходимо обновить.
  3. Зависимости на стороне сервера: ISG полагается на зависимости на стороне сервера для создания динамического содержимого во время сборки. Если эти зависимости изменятся, это может повлиять на процесс сборки и привести к поломке сайта.
  4. Ограниченные обновления в режиме реального времени. Хотя ISG позволяет обновлять динамический контент во время сборки, он по-прежнему ограничен частотой процесса сборки. Это означает, что обновления в режиме реального времени, такие как пользовательский контент, могут не сразу отражаться на сайте.
  5. Возможность устаревшего контента: ISG полагается на процесс сборки для обновления динамического контента. Если возникают проблемы с процессом сборки, содержимое может устареть или устареть.

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

На этом статья закончилась, надеюсь, вы узнали из нее что-то полезное. Поэтому, если у вас есть какие-либо мысли или предложения, не стесняйтесь оставлять комментарии ниже. Не забудьте поделиться своей любовью, похлопав этой статье столько раз, сколько захотите.

Вы можете следить за мной в Twitter, Github, LinkedIn и Facebook.

Удачного кодирования 👨‍💻 🎊.