After attempting to retrieve the most recent liked items from a server component in next, I noticed that the data only displays when manually refreshing the page. Even when I navigate away and return, the data is not refetched automatically - however, using an anchor tag instead of Link seems to solve this issue
export default async function DjProfile({ params }) {
const tracks = await getUserLikes(params?.id);
return (
<Suspense fallback={<LoadingGrid />}>
<TrackContainer tracks={tracks} />
</Suspense>
);
}
const getUserLikes = async (userId) => {
const likesRef = collection(db, "likes");
const querys = query(likesRef, where("currentUser", "==", userId));
const querySnapshot = await getDocs(querys);
const likesData = [];
querySnapshot.forEach((doc) => {
const data = doc.data();
likesData.push(data);
});
console.log("new likes", likesData);
return likesData;
};
I'm uncertain about how to address this issue since I'm utilizing Firestore instead of next fetch which offers some caching options I could implement
Although 'use client' works fine when combined with useEffect, I wonder if server components are more suitable for performance since I don't necessarily require real-time updates on the page itself, just when a user navigates to it