Hey, in this page i get all messages from my database and render them, I feel like im doing something wrong for the cache, can someone help me?
im using drizzle

import type { Metadata } from 'next';
import Client from './component.client';
import getSession from '@/lib/getSession';
import { redirect } from 'next/navigation';
import { db, schema } from '@/db';
import { cache } from 'react';
import { eq } from 'drizzle-orm';
import Image from 'next/image';
import Link from 'next/link';

export const metadata: Metadata = {
 title: 'Only Programmers - Settings',
};

const getCachedGlobalMessage = cache(async () => {
 return await db.query.globalMessage.findMany();
});
const getUserById = cache(async (id: string) => {
 return await db.query.user.findFirst({
  where: eq(schema.user.id, id),
 });
});
const getMessages = async () => {
 const allGlobalMessages = await getCachedGlobalMessage();
 return Promise.all(
  allGlobalMessages.map(async message => {
   const creator = await getUserById(message.createdBy);
   return {
    ...message,
    creator,
   };
  }),
 );
};

export default async function Page() {
 const session = await getSession();
 const user = session?.user;
 if (!user) {
  redirect('/auth?callbackUrl=/settings');
 }
 const messages = await getMessages();
 return (
  <main className='px-3 py-10'>
   <section className='mx-auto max-w-7xl space-y-6'>
    <div className='mx-auto max-w-2xl'>
     <Client />
     <div className='mt-8'>
      <ul className='flex flex-col gap-4'>
       {messages.map(data => (
        <li className='flex min-h-24 flex-row items-center gap-2 rounded border border-[var(--border)] px-2 py-8 shadow-sm'>
         <Link href={`$/profile/${data.creator?.id}`}>
          <Image src={data.creator?.image || ''} className='rounded-full' alt={`${data.creator?.name}'s profile`} width={32} height={32} />
         </Link>
         {data.content}
        </li>
       ))}
      </ul>
     </div>
    </div>
   </section>
  </main>
 );
}