I'm facing an issue with my Next.js 14 application. Specifically, when I add a new friend, I would like to invalidate the "/friends" route from an external backend. This way, when I switch to the page where my friends are rendered, the updated list including the new friend should be displayed. I'm using Next.js with a separate backend. Any guidance on how to achieve this would be greatly appreciated!

The way i fetch the data (Server Side)

async function fetchData(): Promise<
    | {
        challengeData: Challenge[];
        trackingData: TaskTracking | null;
      }
    | undefined
> {
    "use server";
    const session = await getServerSession(options);
    try {
      const [challengeResponse, trackingResponse] = await Promise.all([
        fetch(Backend_URL + /challenge/by_user, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + session?.tokens.accessToken,
          },
          next: {tags: ["byUser"]}
        }),
        fetch(Backend_URL + /task-tracking/today, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + session?.tokens.accessToken,
          },
          next: {tags: ["ttToday"]}
        }),
      ]);

      ... Do some validation...
    } catch (error) {}
  }

The way i want to mutate the data (Client Side)

const createChallenge = async (challengeDto: Inputs) => {
    const { editingTask, ...challengeData } = challengeDto;

    try {
      const response = await fetch( Backend_URL + "/challenge" , {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + session.data?.tokens.accessToken,
        },
        body: JSON.stringify(challengeData),
      });

      if (response.status !== 201) return false;
      return true;
    } catch (err) {
      console.log(err);
      return false;
    }
  }