How to update Theme props on data is revalidation in Next.js with app router?

[chrishoermann]

I have a monorepo with two nextjs (app router) apps and a shared backend that is based upon the plattforms preset from next js. One app is a dashboard app where users can create sites with custom domain or subdomains and which is used to controls the content and the visuals of the site app

revalidation with cache tags works so far by using route handlers in the site app that are called from the backend of the dasboard app.
But one thing that does not work as expected is the revalidation when a users changes the colors of his site on the dashboard.

I use radix theme as a base color provider for my Site app combined with tailwind. As I understand Radix themes uses a Theme Provider that adds html attributes to a div that wrapps the whole application that looks like this:

      <div
        data-is-root-theme="true"
        data-accent-color="green"
        data-gray-color="slate"
        data-has-background="false"
        data-panel-background="solid"
        data-radius="medium"
        data-scaling="100%"
        class="radix-themes"
      />

Here's my layout that feeds the values from the database into the Theme provider:

import type { ReactNode } from "react";
import type { Metadata } from "next";
import { notFound, redirect } from "next/navigation";
import { Theme } from "@radix-ui/themes";

import { getPublicSiteData } from "@acme/api/src/fetchers/site";
import { CompanyThemeSchema } from "@acme/api/src/schemas/custom/theme";
import { prisma } from "@acme/db/src/db";

import { Navbar } from "~/components/nav/navbar";
import { Footer } from "~/components/sections/Footer";

/////////////////////////////////////////////////
// GENERATE STATIC PARAMS
/////////////////////////////////////////////////

export async function generateStaticParams() {
  const allSites = await prisma.site.findMany({
    select: {
      subdomain: true,
      customDomain: true,
    },
  });

  const allPaths = allSites
    .flatMap(({ subdomain, customDomain }) => [
      subdomain && {
        domain: `${subdomain}.${process.env.NEXT_RFK_ONLINE_ROOT_DOMAIN}`,
      },
      customDomain && {
        domain: customDomain,
      },
    ])
    .filter((value): value is RootParamsType =>
      Boolean((value as RootParamsType)?.domain),
    );

  return allPaths;
}

export interface RootParamsType {
  domain: string;
}

/////////////////////////////////////////////////
// GENERATE METADATA
/////////////////////////////////////////////////

export async function generateMetadata({
  params,
}: {
  params: RootParamsType;
}): Promise<Metadata | null> {
  const domain = decodeURIComponent(params.domain);

  const { data } = await getPublicSiteData(domain);

  if (!data) {
    return null;
  }

  const {
    name: title,
    description,
    image,
    logo,
  } = data as {
    name: string;
    description: string;
    image: string;
    logo: string;
  };

  return {
    title,
    description,
    openGraph: {
      title,
      description,
      images: [image],
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: [image],
      creator: "@vercel",
    },
    icons: [logo],
    metadataBase: new URL(`https://${domain}`),
    // Optional: Set canonical URL to custom domain if it exists
    // ...(params.domain.endsWith(`.${process.env.NEXT_RFK_ONLINE_ROOT_DOMAIN}`) &&
    //   data.customDomain && {
    //     alternates: {
    //       canonical: `https://${data.customDomain}`,
    //     },
    //   }),
  };
}

/////////////////////////////////////////////////
// LAYOUT
/////////////////////////////////////////////////

export default async function SiteLayout({
  params,
  children,
}: {
  params: RootParamsType;
  children: ReactNode;
}) {
  const domain = decodeURIComponent(params.domain);
  const { data, error } = await getPublicSiteData(domain);

  if (!data || error) {
    notFound();
  }

  // Optional: Redirect to custom domain if it exists
  if (
    domain.endsWith(`.${process.env.NEXT_RFK_ONLINE_ROOT_DOMAIN}`) &&
    data.customDomain &&
    process.env.REDIRECT_TO_CUSTOM_DOMAIN_IF_EXISTS === "true"
  ) {
    return redirect(`https://${data.customDomain}`);
  }

  const theme = CompanyThemeSchema.parse(data.theme);

  return (
    <Theme {...theme}>
      <Navbar />
      <main className="min-h-screen">{children}</main>
      <Footer
        email={data.company?.email}
        phoneNumber={data.company?.phoneNumber}
        mobilePhone={data.company?.mobilePhone}
      />
    </Theme>
  );
}

The fetcher looks like this:

///////////////////////////////////////////////////////
// GET PUBLIC SITE DATA
///////////////////////////////////////////////////////

export async function getPublicSiteData(domain: string) {
  return await unstable_cache(
    async () => {
      return serverApi(null, async (api) => api.site.findPublicSite(domain));
    },
    [`${domain}-metadata`],
    { tags: [`${domain}-metadata`] },
  )();
}

export type GetSiteDataReturnType = RouterOutputs["site"]["findPublicSite"];

Which calls a trpc endpoint server side

export const siteRouter = createTRPCRouter({
  findPublicSite: publicProcedure
    .input(z.string())
    .query(async ({ input: domain, ctx }) => {
      const subdomain = extractSubdomain(domain);

      const site = await ctx.prisma.site.findUnique({
        where: subdomain ? { subdomain } : { customDomain: domain },
        include: {
          company: {
            include: {
              city: {
                include: {
                  district: {
                    include: {
                      state: {
                        include: {
                          country: true,
                        },
                      },
                    },
                  },
                },
              },
            },
          },
          theme: true,
        },
      });
      return site;
    }),
})

the revalidate site route handler looks like this:

import { revalidateTag } from "next/cache";
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";
import { z } from "zod";

///////////////////////////////////////////
// TYPES
///////////////////////////////////////////

export type RevalidateSiteInputInputType = z.infer<
  typeof RevalidateSiteInputSchema
>;

export type RevalidateSiteRequestType = z.infer<
  typeof RevalidateSiteRequestSchema
>;

///////////////////////////////////////////
// SCHEMAS
///////////////////////////////////////////

export const RevalidateSiteInputSchema = z.object({
  customDomain: z.string().nullable(),
  subdomain: z.string().nullable(),
});

export const RevalidateSiteRequestSchema = RevalidateSiteInputSchema.extend({
  secret: z.literal(process.env.REVALIDATION_SECRET),
});

export async function POST(req: NextRequest) {
  const body = (await req.json()) as unknown;

  const parsedRequest = RevalidateSiteRequestSchema.safeParse(body);

  if (!parsedRequest.success) {
    console.error(parsedRequest.error);

    return NextResponse.json({
      status: 400,
      body: {
        message: "Invalid request body",
        errors: parsedRequest.error,
      },
    });
  }

  const { customDomain, subdomain } = parsedRequest.data;

  if (customDomain) {
    const tag = `${customDomain}-metadata`;
    revalidateTag(tag);
    console.log("Revalidating tags: ", tag);
  }

  if (subdomain) {
    const tag = `${subdomain}.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}-metadata`;
    console.log("Revalidating tags: ", tag);
    revalidateTag(tag);
  }

  return NextResponse.json({
    status: 200,
    body: {
      message: "OK",
    },
  });
}

which is called with this fetcher in every endpoint that changes theme data:

//////////////////////////////////////////////
// FETCHER
//////////////////////////////////////////////

export async function revalidateSite(data: RevalidateSiteInputInputType) {
  await fetch(
    `${process.env.NODE_ENV === "development" ? "http" : "https"}://${
      process.env.NEXT_RFK_ONLINE_ROOT_DOMAIN
    }/api/webhooks/revalidateSite`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        ...data,
        secret: process.env.REVALIDATION_SECRET,
      }),
    },
  );
}

Everything is working so far except that the theme data is not updated on every page of the given domain when revalidation is triggered.

For example after reloading the page on https://mydomain the theme data looks like this:

      <div
        data-accent-color="green"
        ...
      />

and on other pages like https://mydomain/subpage the theme data still has the old color:

      <div
        data-accent-color="tomato"
       ...
      />

Since I call the fetcher getSiteData in the root layout I'd expect that all pages that rely on this layout should be invalidated and have the new color on the next pageload. I must admit that I currently don't understand the next js app router caching to its full extend so there may be a high chance that I made some mistakes in my revalidation logic or that I miss some other pieces of the puzzle. Maybe I miss something with the Theme provider?

Since I assume this issue has something to do with caching and server rendering I also tried moving the Theme provider to a separate component that is explicitly stated "use client" but this did also not change anything

Any help is appreciated.

[vladmoroz]

This is probably a Next.js thing anyway, but can you isolate the issue to a minimal, reproducible example on CodeSandbox?

[kevinmitch14]

What happens if you do the following when revalidating?

import { revalidatePath } from 'next/cache'
 
revalidatePath('/', 'layout')

I am doing something similar to you but I am updating the theme on the client + saving to DB. Client is immediately reading the value from useThemeContext(), same as how <ThemePanel /> works iirc. And if the user refreshes, the component will receive the DB value.

const themeContext = useThemeContext();
const { accentColor, onAccentColorChange } = themeContext;

<input
  type="radio"
  required
  name="accentColor"
  value={color}
  checked={color === accentColor}
  onChange={(event) =>
    onAccentColorChange(
      event.target.value as ThemeOptions["accentColor"],
    )
  }
/>