in next js, if i have an app like spotify where a user can like songs and add them into his collection, when using firebase, how should i call the likes collection?

// server comp
export default async function likesPage({ params, searchParams }) {
const user = await getDj(params?.id);
const following = await getUserFollowers(params?.id);

return (
<div className="rounded flex-grow">
<AritstHero title={user?.displayName} img={user?.profile} user={user} />
<TrackContainer
searchParams={searchParams}
params={params}
text={undefined}
trackList={following}
url={undefined}
/>
</div>
);
}

// firestore call
const getUserFollowers = async (userId) => {
const followersRef = collection(db, "followers");
const querys = query(followersRef, where("user", "==", userId));
const querySnapshot = await getDocs(querys);

const followerData = [];

querySnapshot.forEach((doc) => {
followerData.push(doc.data());
});

return followerData;
};

Currently I have this, but because its a server component, it doesnt recall when you revisit the page and it doesnt update the list until a refresh, is this the right approach? How do i stop caching from firebase? Or should i convert it into a client component