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

Follow

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-next starter enables Incremental Static Generation & Regeneration for you out of the box.

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

import React, { Component } from "react";
import { getAgilityPageProps, getAgilityPaths } from "agility/agility.node";
import { handlePreview } from "agility/agility.browser";
import Layout from "components/agility-global/Layout";

class AgilityPage extends Component {
  render() {
    handlePreview();
    return ;
  }
}

export async function getStaticProps(context) {
  const props = await getAgilityPageProps({ context });
  return {
    props: props,
    revalidate: 1, //will refresh page every 1 second on Vercel...
  };
}

export async function getStaticPaths() {
  const paths = await getAgilityPaths();
  return {
    paths: paths,
    fallback: true,
  };
}

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.