Having issue fetching comment from sanity.io across all pages in Next Js

Question

I have collections of comments from sanity.io, am trying to fetch the comments to make them available on all pages. I tried fetching it in the _app.tsx using getServerProps but am receiving undefined. I then tried using useEffect but same thing is happening. But I tried feching the comment in index.tsx, the data was fetched. I dont want it to be in index.tsx because it will not be available to all Pages. I then try creating a component and use it in the _app.tsx, I fetch and nothing is happening.

This is the getServerProps

export const getServerSideProps = async () => {
  const query = `*[_type == "comment"]{
  _id, surname, firstName, institution, comment
}`;
  const comments = client.fetch(query);
  return {
    props: {
      comments,
    },
  };
};

And this is the useEffect:

const [fetchedComments, setFetchedComment] = useState<Comments>([]);
  console.log(fetchedComments);
  useEffect(() => {
    const getComments = async () => {
      const query = `*[_type == "comment"]{
  _id, surname, firstName, institution, comment
}`;
      const response = await client.fetch(query);

      setFetchedComment(response);
    };
    return () => {
      getComments();
    };
  }, []);