Currently, I am facing an issue with my product page. The metadata for this page is fetched from the backend using an API that retrieves data from a database. To fetch this data and update it on the client side, I am utilizing a custom hook. However, the problem arises when trying to access this metadata using the "use client" directive.
Due to the complexity of the code (over 500 lines), I cannot share it all but here is a brief overview of what I am attempting:
"use client"
import React from "react";
import useGetData from "./useGetData";
const Page = () => {
const { data } = useGetData();
return (
<div>
Utilizing {data}
</div>
);
}
export default Page;
const GenerateMetaDataTags = () => {
const { propId } = useParams();
const { data, loading, error } = useGetData(propId);
const metaData = {};
data.forEach((ele) => {
metaData[ele.name] = ele.content;
});
if (!loading) {
return metaData;
}
};
export const metadata = GenerateMetaDataTags();
The challenge lies in updating this data on the client side post-fetching from the database. Despite experimenting with various methods like layout.js, I must stick to using hooks to retrieve data from the database – which always requires the "use client" directive.