Как реализовать инкрементальную статическую регенерацию (ISR)

import type { GetStaticPaths, GetStaticProps } from 'next'

interface Post {
  id: string
  title: string
  content: string
}

interface Props {
  post: Post
}

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = await fetch('https://api.vercel.app/blog').then((res) =>
    res.json()
  )
  const paths = posts.map((post: Post) => ({
    params: { id: String(post.id) },
  }))

  // Мы предварительно рендерим только эти пути во время сборки.
  // { fallback: 'blocking' } выполнит серверный рендеринг страниц
  // по требованию, если путь не существует.
  return { paths, fallback: false }
}

export const getStaticProps: GetStaticProps<Props> = async ({
  params,
}: {
  params: { id: string }
}) => {
  const post = await fetch(`https://api.vercel.app/blog/${params.id}`).then(
    (res) => res.json()
  )

  return {
    props: { post },
    // Next.js будет инвалидировать кеш при 
    // поступлении запроса, максимум раз в 60 секунд.
    revalidate: 60,
  }
}

export default function Page({ post }: Props) {
  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </main>
  )
}

export async function getStaticPaths() {
  const posts = await fetch('https://api.vercel.app/blog').then((res) =>
    res.json()
  )
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // Мы предварительно рендерим только эти пути во время сборки.
  // { fallback: false } означает, что другие маршруты должны возвращать 404.
  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const post = await fetch(`https://api.vercel.app/blog/${params.id}`).then(
    (res) => res.json()
  )

  return {
    props: { post },
    // Next.js будет инвалидировать кеш при 
    // поступлении запроса, максимум раз в 60 секунд.
    revalidate: 60,
  }
}

export default function Page({ post }) {
  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </main>
  )
}

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  // Проверка секрета для подтверждения валидности запроса
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Неверный токен' })
  }

  try {
    // Должен быть фактический путь, а не переписанный
    // Например, для "/posts/[id]" это должен быть "/posts/1"
    await res.revalidate('/posts/1')
    return res.json({ revalidated: true })
  } catch (err) {
    // При ошибке Next.js продолжит показывать
    // последнюю успешно сгенерированную страницу
    return res.status(500).send('Ошибка регенерации')
  }
}

export default async function handler(req, res) {
  // Проверка секрета для подтверждения валидности запроса
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Неверный токен' })
  }

  try {
    // Должен быть фактический путь, а не переписанный
    // Например, для "/posts/[id]" это должен быть "/posts/1"
    await res.revalidate('/posts/1')
    return res.json({ revalidated: true })
  } catch (err) {
    // При ошибке Next.js продолжит показывать
    // последнюю успешно сгенерированную страницу
    return res.status(500).send('Ошибка регенерации')
  }
}

import type { GetStaticProps } from 'next'

interface Post {
  id: string
  title: string
  content: string
}

interface Props {
  post: Post
}

export const getStaticProps: GetStaticProps<Props> = async ({
  params,
}: {
  params: { id: string }
}) => {
  // Если этот запрос выбросит неперехваченную ошибку, Next.js
  // не инвалидирует текущую страницу и
  // повторит getStaticProps при следующем запросе.
  const res = await fetch(`https://api.vercel.app/blog/${params.id}`)
  const post: Post = await res.json()

  if (!res.ok) {
    // При ошибке сервера можно выбросить ошибку вместо возврата,
    // чтобы кеш не обновлялся до следующего успешного запроса.
    throw new Error(`Не удалось получить посты, статус ${res.status}`)
  }

  return {
    props: { post },
    // Next.js будет инвалидировать кеш при 
    // поступлении запроса, максимум раз в 60 секунд.
    revalidate: 60,
  }
}

export async function getStaticProps({ params }) {
  // Если этот запрос выбросит неперехваченную ошибку, Next.js
  // не инвалидирует текущую страницу и
  // повторит getStaticProps при следующем запросе.
  const res = await fetch(`https://api.vercel.app/blog/${params.id}`)
  const post = await res.json()

  if (!res.ok) {
    // При ошибке сервера можно выбросить ошибку вместо возврата,
    // чтобы кеш не обновлялся до следующего успешного запроса.
    throw new Error(`Не удалось получить посты, статус ${res.status}`)
  }

  return {
    props: { post },
    // Next.js будет инвалидировать кеш при 
    // поступлении запроса, максимум раз в 60 секунд.
    revalidate: 60,
  }
}