Hybrid Rendering with On-Demand Revalidation

Combine `getStaticProps`, `getServerSideProps`, and `getStaticPaths` with on-demand revalidation using an API route to trigger re-generation of static pages.
// 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 {
    // Path to revalidate
    const pathToRevalidate = req.query.path;
    // Trigger a revalidation (rebuild) of the page
    await res.unstable_revalidate(pathToRevalidate);
    return res.json({ revalidated: true });
  } catch (err) {
    // If there was an error, return it
    return res.status(500).send('Error revalidating');
API route to trigger on-demand revalidation of a specified path. It checks a secret token for security and uses unstable_revalidate to re-generate the page.
// pages/[id].js
export async function getStaticPaths() {
  // Here you'd fetch an array of possible paths
  const paths = ['path1', 'path2'];
  return {
    paths: => ({ params: { id } })),
    fallback: 'blocking' // 'blocking' or true

export async function getStaticProps(context) {
  const { params } = context;
  // Here you'd fetch the data for the page
  return { props: { /* Your data */ }, revalidate: 60 };

// Info about component using the data omitted for brevity
Static generation functions for a dynamically routed page. It defines possible paths and includes `revalidate` to automate re-generation at most every 60 seconds.
// pages/_app.js
export function reportWebVitals(metric) {
  // Check which metric to report and send to an analytics endpoint
  // Example: measuring the Largest Contentful Paint (LCP)
  if ( === 'LCP') {
    // Use `navigator.sendBeacon` or another method to report the metric
    // sendToAnalytics(metric);

// Component definition omitted for brevity
Optional web vitals reporting function to optionally measure performance for static generation. Can be used alongside getStaticProps to monitor and trigger revalidation.