The first `fetch` is getting executed twice

[gilded spoke]

I have a page.tsx with a fetch call in CSR. This call is being made twice.

"use client";

import { Transaction } from "@/components/transactions";
import { getTransaction } from "@/utils/services/api";

const Page = async () => {
    const data = await getTransaction();

    return <div>{JSON.stringify(data)}</div>;
};

export default Page;

[calm void]

Client components cannot be async

[gilded spoke]

so using the traditional useEffect api call and storing the data in a state with a loader is the way to go?

[kind light]

or just use async server components

unless getTransaction has react hook in that case yeah just traditional useEffect api call

[gilded spoke]

My PM wants a CSR 😅

Thank you!

[calm void]

Use swr/react-query then

For now, if you need to fetch data in a Client Component, we recommend using a third-party library such as SWR or React Query.

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#use-in-client-components