Clarification NextJS Caching Revalidation

Hi! i have the function:

const getData = unstable_cache(
  async () => {
    const usersData = await db.select().from(users);
    return { users: usersData };
  },
  ["users"],
  {
    revalidate: false
  },
);

export default async function Page() {
  const data = await getData();

  return (
    <main className="container mx-auto p-4">
      <h1 className="mb-6 text-3xl font-bold">User and Course Management</h1>
      <CreateCoursePopup />
      <UsersTable users={data.users} />
    </main>
  );
}

const getData = unstable_cache(
  async () => {
    const usersData = await db.select().from(users);
    return { users: usersData };
  },
  ["users"],
  {
    revalidate: false
  },
);

export default async function Page() {
  const data = await getData();

  return (
    <main className="container mx-auto p-4">
      <h1 className="mb-6 text-3xl font-bold">User and Course Management</h1>
      <CreateCoursePopup />
      <UsersTable users={data.users} />
    </main>
  );
}

const getData = unstable_cache(
  async () => {
    const usersData = await db.select().from(users);
    return { users: usersData };
  },
  ["users"],
  {
    revalidate: false
  },
);

export default async function Page() {
  const data = await getData();

  return (
    <main className="container mx-auto p-4">
      <h1 className="mb-6 text-3xl font-bold">User and Course Management</h1>
      <CreateCoursePopup />
      <UsersTable users={data.users} />
    </main>
  );
}

const getData = unstable_cache(
  async () => {
    const usersData = await db.select().from(users);
    return { users: usersData };
  },
  ["users"],
  {
    revalidate: false
  },
);

export default async function Page() {
  const data = await getData();

  return (
    <main className="container mx-auto p-4">
      <h1 className="mb-6 text-3xl font-bold">User and Course Management</h1>
      <CreateCoursePopup />
      <UsersTable users={data.users} />
    </main>
  );
}

and I have the update function:

"use server"; 

import { adminAction } from "@/server/api/actions";
import { updateUserInput } from "@/validators/users";
import { revalidatePath, revalidateTag } from "next/cache";
import { users } from "@/server/db/schema";
import { db } from "@/server/db";
import { eq } from "drizzle-orm";
import { z } from "zod";

export const updateUserAction = adminAction
  .schema(updateUserInput)
  .action(async ({ parsedInput }) => {
    await db.update(users).set(parsedInput).where(eq(users.id, parsedInput.id));
    revalidateTag("users");
  });

export const deleteUserAction = adminAction
  .schema(z.object({ id: z.string() }))
  .action(async ({ parsedInput }) => {
    await db.delete(users).where(eq(users.id, parsedInput.id));
    revalidateTag("users");
  });

"use server"; 

import { adminAction } from "@/server/api/actions";
import { updateUserInput } from "@/validators/users";
import { revalidatePath, revalidateTag } from "next/cache";
import { users } from "@/server/db/schema";
import { db } from "@/server/db";
import { eq } from "drizzle-orm";
import { z } from "zod";

export const updateUserAction = adminAction
  .schema(updateUserInput)
  .action(async ({ parsedInput }) => {
    await db.update(users).set(parsedInput).where(eq(users.id, parsedInput.id));
    revalidateTag("users");
  });

export const deleteUserAction = adminAction
  .schema(z.object({ id: z.string() }))
  .action(async ({ parsedInput }) => {
    await db.delete(users).where(eq(users.id, parsedInput.id));
    revalidateTag("users");
  });

"use server"; 

import { adminAction } from "@/server/api/actions";
import { updateUserInput } from "@/validators/users";
import { revalidatePath, revalidateTag } from "next/cache";
import { users } from "@/server/db/schema";
import { db } from "@/server/db";
import { eq } from "drizzle-orm";
import { z } from "zod";

export const updateUserAction = adminAction
  .schema(updateUserInput)
  .action(async ({ parsedInput }) => {
    await db.update(users).set(parsedInput).where(eq(users.id, parsedInput.id));
    revalidateTag("users");
  });

export const deleteUserAction = adminAction
  .schema(z.object({ id: z.string() }))
  .action(async ({ parsedInput }) => {
    await db.delete(users).where(eq(users.id, parsedInput.id));
    revalidateTag("users");
  });

"use server"; 

import { adminAction } from "@/server/api/actions";
import { updateUserInput } from "@/validators/users";
import { revalidatePath, revalidateTag } from "next/cache";
import { users } from "@/server/db/schema";
import { db } from "@/server/db";
import { eq } from "drizzle-orm";
import { z } from "zod";

export const updateUserAction = adminAction
  .schema(updateUserInput)
  .action(async ({ parsedInput }) => {
    await db.update(users).set(parsedInput).where(eq(users.id, parsedInput.id));
    revalidateTag("users");
  });

export const deleteUserAction = adminAction
  .schema(z.object({ id: z.string() }))
  .action(async ({ parsedInput }) => {
    await db.delete(users).where(eq(users.id, parsedInput.id));
    revalidateTag("users");
  });

and the data on the page is not revalidatnig when I call the functions, I've tried revalidatePath, same issue. I know the function works because when I Crtl + Shift + R the data is correct. Any insights into why?

AniOP•12/2/24, 12:11 AM

nextjs 15

AniOP•12/2/24, 12:11 AM

and also the page is showing a static icon even tho the page is clearly dynamic

AniOP•12/2/24, 12:12 AM

what am i missing?

AniOP•12/2/24, 12:12 AM

i'm also router.refresh() ing and it doesn't work

AniOP•12/2/24, 12:15 AM

same on build and dev

AniOP•12/2/24, 12:15 AM

with and without turbopack

Benfa•3/4/25, 1:56 PM

have you find out why? i'm having a similar problem

BBenfa have you find out why? i'm having a similar problem

AniOP•3/5/25, 12:27 AM

because giving unstable cache a key isn't the same as tagging it

AniOP•3/5/25, 12:27 AM

const getData = unstable_cache(
  async () => {
    const usersData = await db.select().from(users);
    return { users: usersData };
  },
  ["users"],
  {
    revalidate: false,
    tags:   ["users"], // add this line here
  },
);

const getData = unstable_cache(
  async () => {
    const usersData = await db.select().from(users);
    return { users: usersData };
  },
  ["users"],
  {
    revalidate: false,
    tags:   ["users"], // add this line here
  },
);

AniOP•3/5/25, 12:27 AM

you'd do something like that

AniOP•3/5/25, 12:28 AM

it isn't intutive at all but I guess dynamic IO should fix that problem

Benfa•3/5/25, 7:30 AM

it sill doesn't work for me, i eneded up exporting dynamic = "force-dynamic"

BBenfa it sill doesn't work for me, i eneded up exporting dynamic = "force-dynamic"

AniOP•3/29/25, 11:00 PM

Hey this is prob because you're using

httpBatchStreamLink as your link in trpc, this won't work because the response is sent as soon as the request is received, and then the response body is streamed without the headers

httpBatchLink seems to be a good link for my app so I just changed over to it

https://trpc.io/docs/client/links

Links Overview | tRPC

Links enable you to customize the flow of data between the tRPC Client and Server. A link should do only one thing, which can be either a self-contained modification to a tRPC operation (query, mutation, or subscription) or a side-effect based on the operation (such as logging).

AAni Hey this is prob because you're using httpBatchStreamLink as your link in trp...

Benfa•3/30/25, 7:35 AM

thank you very much for the response! but i ended up switching to tan stack start, it isn't perfect but i find it more explicit than next

AniOP•4/2/25, 11:44 PM

awesome!

Clarification NextJS Caching Revalidation

Similar Threads

Similar Threads

Similar Threads