Implementierung von Incremental Static Regeneration (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) },
  }))

  // Wir werden nur diese Pfade zur Build-Zeit vorrendern.
  // { fallback: 'blocking' } wird Seiten bedarfsgerecht
  // serverseitig rendern, wenn der Pfad nicht existiert.
  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 wird den Cache ungültig machen, wenn eine
    // Anfrage eingeht, maximal einmal alle 60 Sekunden.
    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 },
  }))

  // Wir werden nur diese Pfade zur Build-Zeit vorrendern.
  // { fallback: false } bedeutet, dass andere Routen 404 zurückgeben sollten.
  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 wird den Cache ungültig machen, wenn eine
    // Anfrage eingeht, maximal einmal alle 60 Sekunden.
    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
) {
  // Überprüfen des Geheimnisses, um sicherzustellen, dass dies eine gültige Anfrage ist
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Ungültiges Token' })
  }

  try {
    // Dies sollte der tatsächliche Pfad sein, kein umgeschriebener Pfad
    // z.B. für "/posts/[id]" sollte dies "/posts/1" sein
    await res.revalidate('/posts/1')
    return res.json({ revalidated: true })
  } catch (err) {
    // Bei einem Fehler zeigt Next.js weiterhin
    // die letzte erfolgreich generierte Seite an
    return res.status(500).send('Fehler bei der Revalidierung')
  }
}

export default async function handler(req, res) {
  // Überprüfen des Geheimnisses, um sicherzustellen, dass dies eine gültige Anfrage ist
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Ungültiges Token' })
  }

  try {
    // Dies sollte der tatsächliche Pfad sein, kein umgeschriebener Pfad
    // z.B. für "/posts/[id]" sollte dies "/posts/1" sein
    await res.revalidate('/posts/1')
    return res.json({ revalidated: true })
  } catch (err) {
    // Bei einem Fehler zeigt Next.js weiterhin
    // die letzte erfolgreich generierte Seite an
    return res.status(500).send('Fehler bei der Revalidierung')
  }
}

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 }
}) => {
  // Wenn diese Anfrage einen unbehandelten Fehler wirft, wird Next.js
  // die aktuell angezeigte Seite nicht ungültig machen und
  // getStaticProps bei der nächsten Anfrage erneut aufrufen.
  const res = await fetch(`https://api.vercel.app/blog/${params.id}`)
  const post: Post = await res.json()

  if (!res.ok) {
    // Bei einem Serverfehler sollten Sie möglicherweise
    // einen Fehler werfen statt zurückzugeben, damit der Cache nicht aktualisiert wird
    // bis zur nächsten erfolgreichen Anfrage.
    throw new Error(`Fehler beim Abrufen der Beiträge, Status ${res.status}`)
  }

  return {
    props: { post },
    // Next.js wird den Cache ungültig machen, wenn eine
    // Anfrage eingeht, maximal einmal alle 60 Sekunden.
    revalidate: 60,
  }
}

export async function getStaticProps({ params }) {
  // Wenn diese Anfrage einen unbehandelten Fehler wirft, wird Next.js
  // die aktuell angezeigte Seite nicht ungültig machen und
  // getStaticProps bei der nächsten Anfrage erneut aufrufen.
  const res = await fetch(`https://api.vercel.app/blog/${params.id}`)
  const post = await res.json()

  if (!res.ok) {
    // Bei einem Serverfehler sollten Sie möglicherweise
    // einen Fehler werfen statt zurückzugeben, damit der Cache nicht aktualisiert wird
    // bis zur nächsten erfolgreichen Anfrage.
    throw new Error(`Fehler beim Abrufen der Beiträge, Status ${res.status}`)
  }

  return {
    props: { post },
    // Next.js wird den Cache ungültig machen, wenn eine
    // Anfrage eingeht, maximal einmal alle 60 Sekunden.
    revalidate: 60,
  }
}