export const dynamic = "force-dynamic";
export const revalidate = 10;

async function fetchPersonData(id: string): Promise<any> {
  // Fetch person data using the ID
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/todos/1`,
    {
      cache: "no-store",
    }
  );

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

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

  // const id = searchParams.id;
  const id = "1";
  if (!id) {
    throw new Error("Missing person ID");
  }

  const personData = await fetchPersonData(id);
  console.log("The person data we got: ", personData)

  return (
    <div className="flex flex-col">
    
      <section className="flex flex-col h-screen w-screen p-32">
        <h2 className="font-medium text-2xl">{personData.bio?.title || ""}</h2>
        <h1 className="font-bold text-4xl pt-4">
          {personData.name || ""}{" "}
          <span className="abo-thar">this is title {personData.title || ""}</span>
        </h1>
        <div className="flex w-full justify-between">
          <p className="w-5/12 pt-12 text-justif[enter image description here][1]y">
            {personData.bio?.text || ""}
          </p>
          {personData.imageUrl && (
            <img
              src={personData.imageUrl}
              alt={personData.name || ""}
              className="max-w-96 p-6"
            />
          )}
        </div>
      </section>
     
    </div>
  );
};

export default Person;

enter image description here

Hi there, i've tried your code but with https://jsonplaceholder.typicode.com/todos/1 get api and looks like i'm able to fetch and display data with serverside component, maybe can you check your api or try with diffrent api the problem might be on that side