Next.js newbie here. Basically, I'm building a users page which fetches data with prisma (yes, the database does return data, already tested) and displays it onto the page. However, when navigating to the users page, it does not render anything unless the page is manually refreshed. Also, my navbar has a login handler which shows the status of a user's session (signed in or not), it was always in the loading state when I eventually refreshed the users page.

I did try logging the session status - however, I got an error saying async/await cannot be used with client side components, upon removing it, the page seemed to function as I explained before.

Attached a video for reference.

Here's the code to users/page.tsx :

"use client"

import { prisma } from '@/lib/utils/prisma'
import { HoverEffect } from '@/components/ui/Card'

export default async function Users () {
    const users = await prisma.user.findMany()
    console.log(users)
    const cardDisplay = users.map((user) => ({
        title : `${user.name}'s profile`,
        description : "description that i'll decide on later",
        link : `http://localhost:3000/users/${user.id}`
    }))

    console.log(cardDisplay)

    return (
        <div>
            <HoverEffect items = {cardDisplay}/>
        </div>
    )
}