NextJS triggers the parent fetching when not needed

Question

Project structure

as shown in the image this is my project structure, I have a person page and a Friday-prayers page nested inside it, in the person page there is a data fetching that happens to get the person data from the data base, but the issue is that same fetching is triggered when I enter the Friday-prayers page from the NavBar and causes an error.

this is the error:

**Unhandled Runtime Error

Error: Failed to fetch person data Source

src/app/person/[name]/page.tsx (39:13) @ Person

37 | 38 | if (!res.ok) {

39 | throw new Error("Failed to fetch person data"); | ^ 40 | } 41 | 42 | const jsonRes = await res.json();**

I have looked everywhere and tried ai assistants to fix this issue but nothing works, every time I enter the Friday-prayers page it renders the parent page ( person page ) and causes that error.

this is the person page code:

import getWorkerImageUrl from "@/app/util/r2WorkerHelper";
import { div, i, p } from "framer-motion/client";
import Image from "next/image";

// Configure page options
export const dynamic = "force-dynamic";
export const revalidate = 10;

const Person = async ({
  params,
  searchParams,
}: {
  params: { name: string };
  searchParams: { id?: string };
}) => {
  const { name } = params;
  const id = searchParams.id;

  const res = await fetch(
    `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/get_person/${id}`,
    {
      cache: "no-store",
    }
  );
  console.log(res);

  if (!res.ok) {
    throw new Error("Failed to fetch person data");
  }

  if (!id) {
    throw new Error("Missing person ID");
  }
  const jsonRes = await res.json();
  const personData = jsonRes.data;
  console.log("The person data we got: ", personData);
  // console.log("this is a post from the data: ", resPOst.body?.posts[0])

  return (
    <div className="flex flex-col">
     
      <section className="flex flex-col h-screen w-screen p-32 mt-24">
        <h2 className="font-medium text-2xl">{personData.Bio?.title || ""}</h2>
        <h1 className="font-bold text-4xl pt-4">
          {personData.name || ""}{" "}
          <span className="abo-thar">{personData.title || ""}</span>
        </h1>
        <div className="flex w-full justify-between">
          <p className="w-5/12 pt-12 text-justify">
            {personData.Bio?.text || ""}
          </p>

          <img
            src={getWorkerImageUrl(personData.imgUrl)}
            alt={personData.name || ""}
            className="max-w-96 p-6"
          />
        </div>
      </section>

      {/* <section className="h-screen mt-40">
        <h1>{personData.title}</h1>
        <p>{personData.body}</p>
      </section> */}
      {personData.Bio.Paragraphs.map(
        (paragraph: PersonParagraph, index: number) => (
          <section
            key={index}
            className="grid grid-cols-6 mt-32 h-screen w-screen grid-rows-6 gap-4 p-24"
          >
            <div className="col-span-3 h-full row-span-3">
              <h2 className="text-right text-[#0e0e2c] text-5xl font-medium my-4">
                {paragraph.title}
              </h2>
              <p className="text-justify w-5/6 text-black text-base font-medium leading-[30px]">
                {paragraph.text}
              </p>
              {paragraph.images?.[2] && (
                <img
                  src={getWorkerImageUrl(paragraph.images[2])}
                  alt={`${paragraph.title}`}
                />
              )}
            </div>
            <div className="col-span-3 row-span-3 justify-center flex col-start-4">
              {paragraph.images?.[0] && (
                <img
                  src={getWorkerImageUrl(paragraph.images[0])}
                  alt={`${paragraph.title}`}
                />
              )}
            </div>

            <div className="col-span-3 row-span-3 col-start-4 justify-center flex row-start-4">
              {paragraph.images?.[1] && (
                <img
                  src={getWorkerImageUrl(paragraph.images[1])}
                  alt={`${paragraph.title}`}
                />
              )}
            </div>
          </section>
        )
      )}
    </div>
  );
};

export default Person;

and this is the Friday-prayers page code:

const FridayPrayers = async ({
  params,
  searchParams,
}: {
  params: { name: string };
  searchParams: { id?: string };
}) => {
  const id = searchParams.id;
  
  if (!id) {
    throw new Error("Missing person ID");
  }

  const res = await fetch(
    `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/get_media/${id}?type=video&tag=friday-prayer`,
    {
      cache: "no-store",
    }
  );

  if (!res.ok) {
    throw new Error("Failed to fetch prayers data");
  }

  const jsonRes = await res.json();

  return (
    <div>
      <section className="flex items-center justify-center mt-32">
        <div className="grid sm:grid-cols-4 grid-cols-1 gap-8 p-8">
          {ArrayOfPrayers.map((prayer, index) => (
            <Link
              key={index}
              href={`/${prayer.title}`}
              className="min-h-fit flex-col justify-start items-start inline-flex"
            >
              <div className="h-full p-3.5 bg-white rounded-[20px] shadow flex-col justify-start items-center gap-2 flex">
                <img
                  className="w-[300px] h-[200px] rounded-2xl"
                  src={prayer.imageURL}
                  alt={prayer.title}
                />
                <div className="self-stretch pl-3 pr-2 py-2 justify-end items-start gap-2.5 inline-flex">
                  <h4 className="grow shrink basis-0 text-right text-[#0e0e2c] text-lg font-medium">
                    {prayer.title}
                  </h4>
                </div>
              </div>
            </Link>
          ))}
        </div>
      </section>
    </div>
  );
};

export default FridayPrayers;