1

Is it possible in Next 13 with the App Router, to use revalidatePath without making a fetch call? I'm trying to avoid a full refresh with router.refresh() and rather just refresh on specific tags. I understand this is possible with fetch, but due to using server components an API route isn't needed in this use case.

For example:

import { prisma } from "@/db";

export default async function Page() {
  const addUser = async() => {
    "use server";
    await prisma.user.create({
      data: {
        email: faker.internet.email()
      }
    });
    return {
      revalidateTag: ["db"] <<<<<---------
    }
  };

  return(
    <>
      <form action={ addUser }>
        <input
          ...
        />
      </form>

      <div>{ ...up to date user data }</div>
    </>
  );
}
Gugu72
  • 2,052
  • 13
  • 35
P Savva
  • 309
  • 1
  • 5
  • Though long, I've found this helpful. I don't want to use server actions until they are at least beta (if not production). https://github.com/vercel/next.js/discussions/54075 – Peter Kellner Sep 01 '23 at 12:56

1 Answers1

2

I'm having the same issue. The best approach I could find is to use revalidatePath inside the server action after everything is done.

import { prisma } from "@/db";
import { revalidatePath } from 'next/cache'

export default async function Page() {
  const addUser = async() => {
    "use server";
    await prisma.user.create({
      data: {
        email: faker.internet.email()
      }
    });
         
    revalidatePath("/") //whatever path you are calling it from
  };

  return(
    <>
      <form action={ addUser }>
        <input
          ...
        />
      </form>

      <div>{ ...up to date user data }</div>
    </>
  );
}

You can learn more about it here: https://nextjs.org/docs/app/api-reference/functions/revalidatePath

Matheus Castro
  • 21
  • 3