Hello I have a multi-tenant website builder built on top of next.js. Is it possible to statically serve the dynamically created pages and maybe revalidate them every 15 minutes or so. Currently I am conditionally and dynamically serving the pages for different tenants by using next headers and x-forwarded-for header.

This way when someone fetches tenant-a.com/about the dynamic page is served as static even though it uses headers in order to check which tenant is in question requesting the page?

export const dynamic = "force-dynamic";

export default async function DynamicPage({
  params,
  searchParams,
}) {
  let page: Page | null = null;

  const { slug } = await params;

  // uses next/headers under the hood to get x-forwarded-for header
  const tenantDomain = await getTenantDomain();

  // uses "use cache" directive to optimize for high load
  page = await getPageBySlug({
    slug,
    tenantDomain,
  });

  if (!page) {
    return notFound();
  }

  return (
    <RenderPage page={page} />
  );
}

Currently I don't understand if what I want to do is possible since by using headers you automatically opt out of SSG and ISR. What would be the best way to implement this functionality?

If it makes a difference I am using the experimental "use cache" directive along with database not being available during build time.

If you have any ideas/resources on how I can achieve this, or that might nudge me in the right direction, please tell me.

Thank you guys 🙏