Next.js Discord

Discord Forum

My page is not loading due to these fetch requests. What could be the problem and how can I fix it?

Unanswered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
I examined my code, but I did not understand where the problem came from. When I examine the network requests in Chrome, it enters an endless loop.

10 Replies

Plott Hound
Can you share the code for the fetch request please
West African LionOP
import DetailContainer from "@/container/DetailContainer";
import { getAllCars } from "@/lib/actions";

const carsData = await getAllCars();

export async function generateMetadata({ params }) {
  const detailCar = carsData.find((car) => car.id == params.id);

  return {
    title: `${detailCar.brand} ${detailCar.model}`,
  };
}

const page = async ({ params }) => {
  const detailCar = carsData.find((car) => car.id == params.id);

  return <DetailContainer detailinfo={detailCar} />;
};

export default page;
@Plott Hound Can you share the code for the fetch request please
West African LionOP
this
Cape lion
Hi Furkan,

I am having the same issue. Did you find a solution for the same?
@Cape lion Hi Furkan, I am having the same issue. Did you find a solution for the same?
Clown
Are you using App Router? The issue here seems to be related to calling the server action outside of a client or server component.
@Clown Are you using App Router? The issue here seems to be related to calling the server action outside of a client or server component.
Cape lion
I am using the app/ folder structue for routing. The issue is only with the api call in generateMetadata function - If I remove that part, everything works fine.
@Clown Try creating that carsData variable inside the generateMetadata.
Cape lion
Yes, in my case, the API is being called inside the generateMetadata function. Still, I am running into the same issue.
@Cape lion Yes, in my case, the API is being called inside the generateMetadata function. Still, I am running into the same issue.
Clown
Did you move the variable inside the generateMetadata(). Don't keep it outside the component or generateMetadata().
@Clown Did you move the variable **inside** the generateMetadata(). Don't keep it outside the component or generateMetadata().
Cape lion
Yes Yes. My function looks like this now:

import DetailContainer from "@/container/DetailContainer";
import { getAllCars } from "@/lib/actions";



export async function generateMetadata({ params }) {
  const carsData = await getAllCars();
  const detailCar = carsData.find((car) => car.id == params.id);

  return {
    title: `${detailCar.brand} ${detailCar.model}`,
  };
}

const page = async ({ params }) => {
  const carsData = await getAllCars();
  const detailCar = carsData.find((car) => car.id == params.id);

  return <DetailContainer detailinfo={detailCar} />;
};

export default page;