Hello, I am trying to fetch and post data by making http request. However when I add the call to the client component and I test it, it keeps rebuilding the component and making request every second.

This is the component:

"use client";

import { fetchData } from "@/libs/utils";

export default async function Template({ params }: { params: { id: string } }) {
  const url = "/api/my_template/" + params.id;
  let api_result = undefined;
  try {
    api_result = await fetchData(url);
  } catch (e) {
    return <>Something went wrong</>;
  }

  console.log("api result:", api_result);
  return <></>;

The only recourse I found is this: https://nextjs.org/docs/pages/building-your-application/data-fetching/client-side. However that's for pages router and I use app router.

What should I do to fix this behaviour?