Updating Content without Rebuilding your Site with Next.js and Vercel

One caveat to Static sites is the fact that in order to update or publish new content on your site, the entire site needs to rebuild. For larger websites with plenty of content, a rebuild can take up a decent amount of time which is typically not ideal, especially for Editors.

Thanks to Next.js, features such as Incremental Static Generation (Fallback Mode) and Incremental Static Re-generation (Revalidate), you can generate new pages on-demand and update or publish new content on your website at Runtime just like a Server Side Rendered website or web application.

Our agilitycms-nextjs-starter enables Incremental Static Generation & Regeneration for you out of the box.

In pages/[...slug].js:

import Layout from "components/common/Layout";
import { getAgilityPageProps, getAgilityPaths } from "@agility/nextjs/node";
import { getModule } from "components/agility-pageModules";
import SiteHeader from "components/common/SiteHeader";

// getStaticProps function fetches data for all of your Agility Pages and Next.js will pre-render these pages at build time
export async function getStaticProps({
  preview,
  params,
  locale,
  defaultLocale,
  locales,
}) {
  // place all global here
  const globalComponents = {
    header: SiteHeader,
  };

  const agilityProps = await getAgilityPageProps({
    preview,
    params,
    locale,
    getModule,
    defaultLocale,
    globalComponents,
  });

  if (!agilityProps) {
    // We throw to make sure this fails at build time as this is never expected to happen
    throw new Error(`Page not found`);
  }

  return {
    // return all props
    props: agilityProps,

    // Next.js will attempt to re-generate the page when a request comes in, at most once every 10 seconds
    // Read more on Incremental Static Regenertion here: https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration
    revalidate: 10,
  };
}

// Next.js will statically pre-render all the paths from Agility CMS
export async function getStaticPaths({ locales, defaultLocale }) {
  //get the paths configured in agility
  let agilityPaths = await getAgilityPaths({
    preview: false,
    locales,
    defaultLocale,
  });

  return {
    paths: agilityPaths,
    fallback: true,
  };
}

const AgilityPage = (props) => {
  return <Layout {...props} />
};

export default AgilityPage;

More information on Incremental Static Generation & Regeneration

1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.