How can I re-render a server side page based on a user session id? next14

Question

I am trying to make a social media application using next14, and I am having an issue where when I login into a account and get the user profile and render it to the screen, then when I logout of the account and login with in another account for some reason it shows the old previous data, even though i have logged into a different account. I tried console.log to see if the page is being rerenderd but I noticed since it's server side it is not rerendering, even though there is different user id.

api/profile/:profileID

export const GET = async (req, {params}) => {

    await connectDB();

    const userID = params.profileID;

    if (!userID){
        return NextResponse.json({message: "Invalid Auth"}, {status: 500})
    }

    try {
        const dbUser = await User.findById(userID);

        return NextResponse.json({ dbUser }, { status: 200 });
    } catch (error) {
        console.error("Error fetching user data:", error);
        return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
    }
}

export const getProfile = async () => {

    const {user} = await getServerSession(authOptions);

    try {
        const res = await fetch(`http://localhost:3000/api/profile/${user.id}`, {
            cache: 'no-store',
        });

        return await res.json();
    } catch (error) {
        console.log('error', error);
    }
}

async function Setting() {

    const {dbUser} = await getProfile()

    return (
        <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-6">
            <div className="rounded-lg">
                <div className="">
                    <h2 className="font-semibold text-lg">Account Settings</h2>
                    <SettingForm formData={dbUser}/>
                </div>
            </div>
        </main>
    )

}

SettingFrom is a client component where it just passes and renders the user info. I noticed that even though it is a different account, it doesn't update and rerender without having to actually refresh the page.

The only way it worked for me is when I use router.refresh(): but I would like to find better way if possible.

 const loginHandler = async () => {

        const {email, password} = formData;

        const res = await signIn("credentials", {
            email,
            password,
            redirect: false,
        }).then((res) => {
            console.log(res)
            if (res?.error) {
                toast.error( "Invalid email or password" );
            } else {
                toast.success('Event has been created')
                router.replace("/setting")
                router.refresh()
            }
        })

    }