Persisting ISR cache across builds/deploys

Bbuono · 2024-11-26 21:17:30.573001+00

Hey folks, I have a relatively large ISR site (>600k pages). ISR works well, but I'm losing my cache every time I do a deploy, which is less than ideal. I want these pages primed as we're optimizing for SEO, and I don't mind if an invalidation is needed to refresh the pages content. The Vercel docs state ISR cache is automatically put in durable storage but every time I deploy, I lose the cache and it needs to be warmed again. What am I missing? Thanks

Hi! Could you help us understand why our pages are being invalidated and re-generated on subsequent requests after a deployment causing longer load times? Even when changes are unrelated to the components/routes we're rendering. Whenever we commit to the branch, and Vercel re-builds and re-deploys the app, it causes the first visit to the page to be super slow. I tested using timestamps on the props on preview environments, and it showed they were being regenerated on the first request. After that, the timestamp was stable and the generation worked as expected. But whenever we made a deployment, it cleared all the generated pages. We're currently using the pages router (but we also tried using the app router). We are using fallback: true mechanism (which is supposed to generate new pages on demand in the background, and serve the stale version upfront). Here's the ISR page we currently have. Is there anything we're doing wrong or misunderstanding here? How can we get our ISR pages to stay alive across multiple deployments so we don't need to warm them up for the first page view? Thanks!

1/* eslint-disable import/order */2import { GetStaticPaths, GetStaticProps } from "next";3import { charityDirectoryNonprofitPageRequest } from "@/services/charity-directory";4import { Nonprofit } from "@/services/charity-directory/types";56import { CharityProfile } from "@/components/charity-components";7import { MayNotOperate } from "@/components/charity-components/may-not-operate";89import "../../globals.css";1011import Head from "next/head";12import { ctaDownloadAppRequestStatic } from "@/services/datocms/download-button/request-static";1314import { Layout } from "@/components/static-layout/layout";1516interface NonprofitProfileProps {17  nonprofit: Nonprofit;18  downloadLinks: {19    appleStoreUrl: string;20    chromeStoreUrl: string;21    macOsStoreUrl: string;22    legacyStoreUrl: string;23  };24}2526interface Props {27  nonprofit: Nonprofit;28}2930export const getStaticPaths: GetStaticPaths = async () => ({31  paths: [32    {33      params: { ein: "010130427" }, // This is our testing EIN we have it generated on build time.34    },35  ],36  fallback: true,37});3839// ISR (Incremental Static Regeneration)40export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {41  const nonprofitEin = (params?.ein as string).replace("ein-", "");42  const nonprofit = await charityDirectoryNonprofitPageRequest(nonprofitEin);43  const downloadLinks = await ctaDownloadAppRequestStatic();4445  if (!nonprofit) {46    return {47      notFound: true,48    };49  }5051  return {52    props: {53      nonprofit,54      downloadLinks: {55        appleStoreUrl:56          downloadLinks.ctaDownloadApp?.ctaDownloadAppStoreUrl?.href,57        chromeStoreUrl:58          downloadLinks.ctaDownloadApp?.ctaDownloadAppChromeStoreUrl?.href,59        macOsStoreUrl:60          downloadLinks.ctaDownloadApp?.ctaDownloadMacosSafariExtensionUrl61            ?.href,62        legacyStoreUrl:63          downloadLinks.ctaDownloadApp?.ctaDownloadAppChromeStoreUrl?.href,64      },65    },66    revalidate: 60 * 60 * 24, // 24 hours67  };68};6970function NonprofitProfile({ nonprofit, downloadLinks }: NonprofitProfileProps) {71  if (!nonprofit) return;7273  // Set custom title and description based on nonprofit data74  const customTitle = `${nonprofit.name} | Legit, CEO Salary, Mission, 990 and more`;75  const customDescription = `Learn about ${nonprofit.name}: Is it legit? Do I like the mission? What is the CEO's salary?`;7677  const titleWithReview = `Reviews of ${nonprofit.name}, CEO Salary, Legit, Mission, 990 and more`;78  const descriptionWithReview = `Read reviews of ${nonprofit.name}. Is it legit? Do I like the mission? What is the CEO's salary?`;7980  // Choose title and description based on review presence81  const pageTitle =82    nonprofit.faqs.review || nonprofit.faqs.reviewFacebook83      ? titleWithReview84      : customTitle;85  const pageDescription =86    nonprofit.faqs.review || nonprofit.faqs.reviewFacebook87      ? descriptionWithReview88      : customDescription;8990  return (91    nonprofit && (92      <Layout downloadLinks={downloadLinks}>93        <Head>94          <title>{pageTitle}</title>95          <meta name="description" content={pageDescription} />96          <meta property="og:title" content={pageTitle} />97          <meta property="og:description" content={pageDescription} />98          <meta property="twitter:title" content={pageTitle} />99          <meta property="twitter:description" content={pageDescription} />100        </Head>101        {typeof nonprofit.valid === "undefined" || nonprofit.valid ? (102          <CharityProfile nonprofit={nonprofit} nonprofitEin={nonprofit.ein} />103        ) : (104          <MayNotOperate nonprofit={nonprofit} nonprofitEin={nonprofit.ein} />105        )}106      </Layout>107    )108  );109}110111export default NonprofitProfile;

1/* eslint-disable import/order */2import { GetStaticPaths, GetStaticProps } from "next";3import { charityDirectoryNonprofitPageRequest } from "@/services/charity-directory";4import { Nonprofit } from "@/services/charity-directory/types";56import { CharityProfile } from "@/components/charity-components";7import { MayNotOperate } from "@/components/charity-components/may-not-operate";89import "../../globals.css";1011import Head from "next/head";12import { ctaDownloadAppRequestStatic } from "@/services/datocms/download-button/request-static";1314import { Layout } from "@/components/static-layout/layout";1516interface NonprofitProfileProps {17  nonprofit: Nonprofit;18  downloadLinks: {19    appleStoreUrl: string;20    chromeStoreUrl: string;21    macOsStoreUrl: string;22    legacyStoreUrl: string;23  };24}2526interface Props {27  nonprofit: Nonprofit;28}2930export const getStaticPaths: GetStaticPaths = async () => ({31  paths: [32    {33      params: { ein: "010130427" }, // This is our testing EIN we have it generated on build time.34    },35  ],36  fallback: true,37});3839// ISR (Incremental Static Regeneration)40export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {41  const nonprofitEin = (params?.ein as string).replace("ein-", "");42  const nonprofit = await charityDirectoryNonprofitPageRequest(nonprofitEin);43  const downloadLinks = await ctaDownloadAppRequestStatic();4445  if (!nonprofit) {46    return {47      notFound: true,48    };49  }5051  return {52    props: {53      nonprofit,54      downloadLinks: {55        appleStoreUrl:56          downloadLinks.ctaDownloadApp?.ctaDownloadAppStoreUrl?.href,57        chromeStoreUrl:58          downloadLinks.ctaDownloadApp?.ctaDownloadAppChromeStoreUrl?.href,59        macOsStoreUrl:60          downloadLinks.ctaDownloadApp?.ctaDownloadMacosSafariExtensionUrl61            ?.href,62        legacyStoreUrl:63          downloadLinks.ctaDownloadApp?.ctaDownloadAppChromeStoreUrl?.href,64      },65    },66    revalidate: 60 * 60 * 24, // 24 hours67  };68};6970function NonprofitProfile({ nonprofit, downloadLinks }: NonprofitProfileProps) {71  if (!nonprofit) return;7273  // Set custom title and description based on nonprofit data74  const customTitle = `${nonprofit.name} | Legit, CEO Salary, Mission, 990 and more`;75  const customDescription = `Learn about ${nonprofit.name}: Is it legit? Do I like the mission? What is the CEO's salary?`;7677  const titleWithReview = `Reviews of ${nonprofit.name}, CEO Salary, Legit, Mission, 990 and more`;78  const descriptionWithReview = `Read reviews of ${nonprofit.name}. Is it legit? Do I like the mission? What is the CEO's salary?`;7980  // Choose title and description based on review presence81  const pageTitle =82    nonprofit.faqs.review || nonprofit.faqs.reviewFacebook83      ? titleWithReview84      : customTitle;85  const pageDescription =86    nonprofit.faqs.review || nonprofit.faqs.reviewFacebook87      ? descriptionWithReview88      : customDescription;8990  return (91    nonprofit && (92      <Layout downloadLinks={downloadLinks}>93        <Head>94          <title>{pageTitle}</title>95          <meta name="description" content={pageDescription} />96          <meta property="og:title" content={pageTitle} />97          <meta property="og:description" content={pageDescription} />98          <meta property="twitter:title" content={pageTitle} />99          <meta property="twitter:description" content={pageDescription} />100        </Head>101        {typeof nonprofit.valid === "undefined" || nonprofit.valid ? (102          <CharityProfile nonprofit={nonprofit} nonprofitEin={nonprofit.ein} />103        ) : (104          <MayNotOperate nonprofit={nonprofit} nonprofitEin={nonprofit.ein} />105        )}106      </Layout>107    )108  );109}110111export default NonprofitProfile;