Very high ISR writes with Plasmic page with dynamic pages

Developer Support
1

I have a plasmic website that has several dynamic pages - we work in the short form video space so we have dynamic pages for SEO purposes on many hashtags / influencers.

When I deploy our website to Vercel, I get very high ISR write numbers - like 100k per hour. This gets expensive very quickly - on our current tier we have 2m so this goes in under 1 day.

Is there any way to prevent this? I have a revalidation period in my [[catchall]] route as 7 days, but I can’t seem to see anywhere else where I can prevent this happening.

Thanks,
Nick

2

Hey @nick_dart, that is indeed a very high amount of writes.

Could you provide a bit more of information about your setup:
Are you using split content from Plasmic?
Do you have middlewares set up?
Can you share your catchall page?

3

Sure thing:

Maybe some things to note:

  • i have many dynamic pages - they are sourced from TikTok/Instagram data, so effectively unlimited - could that be causing it? Each one does a Plasmic “data query”.

  • I’m not using split content from plasmic

  • I dont have any middleware setup

  • file contents:

import * as React from 'react';
import {
  PlasmicComponent,
  ComponentRenderData,
  PlasmicRootProvider,
  extractPlasmicQueryData
} from '@plasmicapp/loader-nextjs';
import { GetStaticPaths, GetStaticProps } from 'next';
import Error from 'next/error';
import { useRouter } from 'next/router';
import { PLASMIC } from '../plasmic-init';
/**
 * Use fetchPages() to fetch list of pages that have been created in Plasmic
 */
export const getStaticPaths: GetStaticPaths = async () => {
  const pages = await PLASMIC.fetchPages();
  return {
    paths: pages.map((page) => ({
      params: { catchall: page.path.substring(1).split('/') }
    })),
    fallback: 'blocking'
  };
};

/**
 * For each page, pre-fetch the data we need to render it
 */
export const getStaticProps: GetStaticProps = async (context) => {
  const { catchall } = context.params ?? {};

  // Convert the catchall param into a path string
  const plasmicPath =
    typeof catchall === 'string' ? catchall : Array.isArray(catchall) ? `/${catchall.join('/')}` : '/';
  const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
  if (!plasmicData) {
    // This is some non-Plasmic catch-all page
    return {
      props: {}
    };
  }

  // This is a path that Plasmic knows about.
  const pageMeta = plasmicData.entryCompMetas[0];

  // Cache the necessary data fetched for the page.
  const queryCache = await extractPlasmicQueryData(
    <PlasmicRootProvider
      loader={PLASMIC}
      prefetchedData={plasmicData}
      pageRoute={pageMeta.path}
      pageParams={pageMeta.params}
    >
      <PlasmicComponent component={pageMeta.displayName} />
    </PlasmicRootProvider>
  );

  // Pass the data in as props.
  return {
    props: { plasmicData, queryCache },

    // Use a longer revalidation period to reduce ISR writes
    revalidate: 604800  // 7 days (increased from 24 hours)
  };
};

/**
 * Actually render the page!
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export default function CatchallPage(props: { plasmicData?: ComponentRenderData; queryCache?: Record<string, any> }) {
  const { plasmicData, queryCache } = props;
  const router = useRouter();
  if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
    return <Error statusCode={404} />;
  }
  const pageMeta = plasmicData.entryCompMetas[0];
  return (
    // Pass in the data fetched in getStaticProps as prefetchedData
    <PlasmicRootProvider
      loader={PLASMIC}
      prefetchedData={plasmicData}
      prefetchedQueryData={queryCache}
      pageRoute={pageMeta.path}
      pageParams={pageMeta.params}
      pageQuery={router.query}
    >
      {
        // pageMeta.displayName contains the name of the component you fetched.
      }
      <PlasmicComponent component={pageMeta.displayName} />
    </PlasmicRootProvider>
  );
}
4

Hey @nick_dart ,

Since you have a high number of pages, would be nice seeing which routes are responsible for this high amount of writes. You can check this in the Vercel observability page. From you current setup, I don’t see anything wrong.