Next.js Discord

Discord Forum

Is it overkill to call revalidatePath for a like/follow?

Answered
Florian posted this in #help-forum
Open in Discord
FlorianOP
Is it overkill to call revalidatePath (and refetch the whole page) when clicking a like or follow button?

Right now, I do this in a server action.

Instead of calling revalidatePath, I could return a value and store it in state. Which approach do you prefer?

"use server";

import { validateRequest } from "@/auth";
import prisma from "@/lib/prisma";
import { getFollowerInfoSelect } from "@/lib/types";
import { revalidatePath } from "next/cache";

export async function followUser(userId: string, follow: boolean) {
  const { user: loggedInUser } = await validateRequest();

  if (!loggedInUser) throw new Error("Unauthorized");

  if (follow) {
    await prisma.follow.create({
      data: {
        followerId: loggedInUser.id,
        followingId: userId,
      },
    });
  } else {
    await prisma.follow.delete({
      where: {
        followerId_followingId: {
          followerId: loggedInUser.id,
          followingId: userId,
        },
      },
    });
  }

  const followerInfo = await prisma.user.findUnique({
    where: {
      id: userId,
    },
    select: getFollowerInfoSelect(loggedInUser.id),
  });

  if (!followerInfo) throw new Error("User not found");

  // TODO: Is it overkill to revalidate the path for a simple like change? Alternatively, I could store the likes in state like in the React docs: https://react.dev/reference/react/useOptimistic
  revalidatePath("/");
}
Answered by B33fb0n3
yea I think so too. I like to also use next-safe-actions. Their [useOptimisticAction](https://next-safe-action.dev/docs/usage-from-client/hooks/useoptimisticaction) is pretty simple. It sync the result with the server result after it's done. So you just call the function execute and directly (optimistic) the counter will be updated. If something goes wrong in the backend, the counter will reset to it's old value. If everything goes right, the data from the server action will replace your optimistic data 👍
View full answer

7 Replies

@Florian Is it overkill to call revalidatePath (and refetch the whole page) when clicking a like or follow button? Right now, I do this in a server action. Instead of calling revalidatePath, I could return a value and store it in state. Which approach do you prefer? TypeScript "use server"; import { validateRequest } from "@/auth"; import prisma from "@/lib/prisma"; import { getFollowerInfoSelect } from "@/lib/types"; import { revalidatePath } from "next/cache"; export async function followUser(userId: string, follow: boolean) { const { user: loggedInUser } = await validateRequest(); if (!loggedInUser) throw new Error("Unauthorized"); if (follow) { await prisma.follow.create({ data: { followerId: loggedInUser.id, followingId: userId, }, }); } else { await prisma.follow.delete({ where: { followerId_followingId: { followerId: loggedInUser.id, followingId: userId, }, }, }); } const followerInfo = await prisma.user.findUnique({ where: { id: userId, }, select: getFollowerInfoSelect(loggedInUser.id), }); if (!followerInfo) throw new Error("User not found"); // TODO: Is it overkill to revalidate the path for a simple like change? Alternatively, I could store the likes in state like in the React docs: https://react.dev/reference/react/useOptimistic revalidatePath("/"); }
B33fb0n3
I would handle the like and follow stuff clientside. Like that you can (if you really need to) only refetch this specific part of the page. revalidatePath would revalidate the whole page and everything would be reloaded. That's an easy solution, but not an efficient one. I recommend you using a client library like react query or swr for it
FlorianOP
But apart from that, I agree. I think revalidating the whole page is overkill.
B33fb0n3
yea I think so too. I like to also use next-safe-actions. Their [useOptimisticAction](https://next-safe-action.dev/docs/usage-from-client/hooks/useoptimisticaction) is pretty simple. It sync the result with the server result after it's done. So you just call the function execute and directly (optimistic) the counter will be updated. If something goes wrong in the backend, the counter will reset to it's old value. If everything goes right, the data from the server action will replace your optimistic data 👍
Answer
FlorianOP
Thank you, I'll have a look at that 👍🏻
B33fb0n3
happy to help. Please mark solution
B33fb0n3