I'm wondering how I can retrieve data from the database well on the client in next.js, since I have such a site:

"use client";
const CalendarPage = () => {
  const [date, setDate] = useState<Date>(new Date());
  const [selectedTime, setSelectedTime] = useState<string | null>("10:00");
  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);

  return (
    <div className="space-y-8 ">
      <div className="flex items-center justify-center mb-4 gap-3 mt-4 lg:mt-0">
        <CalendarIcon className="text-primary" />
        <h1 className="text-3xl font-bold">Schedule Action</h1>
      </div>
      <p className="text-muted-foreground max-w-2xl mx-auto text-center">
        By booking a specific date, you ensure that you won’t run out of points when you need them
      </p>

      <div className="grid lg:grid-cols-3 gap-4 ">
        <Calendar date={date} selectedTime={selectedTime}/>
        <div className="space-y-4 ">
          <CalendarLegend />
          <DailyReputationBalance date={date}/>
        </div>
      </div>

      <ScheduleActionDialog isDialogOpen={isDialogOpen} />
    </div>
  );
};

export default CalendarPage;

And in the DailyReputationBalance component I need to retrieve the information that comes from the database, but I have such a layout that is already all rendered on the client.

I have never had such a case that I can not retrieve data from the database on the server component. And now I'm wondering, in this client component DailyReputationBalance, can I use SWR and api GET on which I download the information? Is there perhaps a better way, or is this not how it should be done