웹후크를 사용하여 온디맨드 정적 Next.js 페이지 재검증

Next.js 12.2는 On-demand Revalidation의 안정적인 버전을 제공했습니다. 재배포할 필요 없이 사이트의 콘텐츠를 업데이트할 수 있는 유용한 기능입니다. 웹후크와 함께 사용하는 방법은 다음과 같습니다.

다이브 인

Incremental Static Regeneration 잘 작동합니다. 그래도 정적 페이지를 즉시 재검증해야 하는 경우가 있습니다. 재검증 기간이 1시간인 정적 페이지가 있다고 가정해 보겠습니다. 전체 시간 동안 getStaticProps 함수의 오래된 데이터가 표시됩니다. 여기에서 On-demand Revalidation이 개입합니다.

Next.js 팀은 유용한 정보example를 제공합니다.

// pages/api/revalidate.js

export default async function handler(req, res) {
  // Check for secret to confirm this is a valid request
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' })
  }

  try {
    // this should be the actual path not a rewritten path
    // e.g. for "/blog/[slug]" this should be "/blog/post-1"
    await res.revalidate('/path-to-revalidate')
    return res.json({ revalidated: true })
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating')
  }
}

다음 URL 구조를 사용하여 경로에 액세스할 수 있습니다.

https://<your-site.com>/api/revalidate?secret=<token>

Next.js 앱에서 페이지의 유효성을 다시 확인하는 것은 매우 쉬울 수 있지만 모든 경우에 작동하지는 않습니다. 사용자별로 재확인을 제한하고 싶다고 가정해 보겠습니다(각 사용자는 자신의 페이지만 재확인할 수 있음). 여기서 웹후크는 매우 유용합니다.

웹후크 구현

재확인 페이지에 요청을 보내 페이지를 재확인할 수 있습니다. 내가 싫어하는 것은 백엔드의 모든 정적 페이지 경로를 "기억"하는 것입니다.

유효성 재검사를 위해 엔터티 → 페이지 흐름을 사용할 수 있습니다.



백엔드는 모든 엔티티의 변경 사항을 알고 Webhook에 요청을 보냅니다. 프런트엔드는 정적 페이지의 재검증을 제어합니다.

코드 부분은 매우 간단합니다.

import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') {
    return res.status(400).json({ message: 'Method must be POST' });
  }

  const token = req.headers['revalidation-token']?.toString();
  if (token !== process.env.REVALIDATION_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  try {
    await Promise.all([
      res.revalidate(`/users/${req.query.slug}`),
      res.revalidate(`/users/${req.query.slug}/products`),
    ]);
    return res.status(200).send({ message: 'Revalidated' });
  } catch (err) {
    return res.status(500).send({ message: 'Error revalidating' });
  }
}

개인적으로 저는 간단하고 편리한 건축 결정을 좋아합니다. Next.js가 우리에게 그런 기회를 준다는 것이 기쁩니다.


를 통해 저에게 연락 주시기 바랍니다. 건배 👋