Static Generation with Automatic Revalidation (ISR)

Showcase Incremental Static Regeneration using `getStaticProps` and `revalidate` property to cache and periodically update static pages.

export async function getStaticProps() {
   // Fetch data from an API or other sources
   const data = await fetchData();

   return {
      props: { data }, // pass the data as props to the page
      revalidate: 10, // revalidate the data every 10 seconds
   };
}

Defines getStaticProps function for Static Generation with data fetched at build time. The page will be re-rendered at most once every 10 seconds if new requests come in.

export default function Page({ data }) {
  return (
    <div>
      <h1>My Static Page</h1>
      {/* Render your data here */}
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Exports the page component that consumes the static data. It uses the data passed through getStaticProps.