Hi, in my application I am trying fetch data from the database using server component. After fetching data in server component called HistoryList , I passed them into client component called History as children.


My Issues


HistoryList is executing fetchHistory() in a continuous loop like scenario without stopping fetching data.

import { fetchHistory } from "@/lib/fetchHistory";

const HistoryList = async () => {
  let history = await fetchHistory();
  console.log(history);

  return (
    <History>
      {
        <div>
          {history?.map((historyItem, index) => (
            <HistoryCard key={index} history={historyItem} />
          ))}
        </div>
      }
    </History>
  );
};

export default HistoryList;

const History = ({ children }: { children: ReactNode }) => {
  return (
    <div>
      <h1>History</h1>
      {children}
    </div>
  );
};

export default History;

"use server";
import History from "@/models/History";
import { connectToDB } from "@/util/database/database";

export const fetchHistory = async () => {
  try {
    await connectToDB();
    const results = await History.find({}, { msgs: 1, id: 1 });
    return results;
  } catch (error) {
    console.log(error);
  }
};

export default function Page({ params }: any) {
  return (
    <div className="h-full">
      <ResizablePanelGroup direction="horizontal">
        <ResizablePanel defaultSize={30} className="!overflow-y-auto">
          <HistoryList />
        </ResizablePanel>
        <ResizableHandle withHandle />

        {/* chat workspace */}
        <ResizablePanel defaultSize={50}>{/* <Chat /> */}</ResizablePanel>
           <Chat />
        <ResizableHandle withHandle />
      </ResizablePanelGroup>
    </div>
  );