Any reason as to why this isn't fetching the firestore data and displaying it on said page? Using the nextjs 13 app dir

Question

I'm currentl trying to fetch the firestore data from firebase on Nextjs using the new App directory. But it seem to be defaulting to "the community does not exist...." page instead. Can't seem to be able to fetch the data in the new App directory. Would appreciate if someone could help out! Thanks in advance!

'use client'
import { useEffect } from "react";
import { doc, getDoc } from "firebase/firestore";
import type { GetServerSidePropsContext, NextPage } from "next";
import { useAuthState } from "react-firebase-hooks/auth";
import { useRecoilState } from "recoil";
import safeJsonStringify from "safe-json-stringify";
import { auth, firestore } from "@/app/firebase/clientApp";
import { Community, communityState } from "@/app/communicate/atoms/communitiesAtom";
import CommunityNotFound from "@/app/communicate/components/Community/NotFound";
import Header from "@/app/communicate/components/Community/Header";
import PageContentLayout from "@/app/communicate/components/Layout/PageContentLayout";
import CreatePostLink from "@/app/communicate/components/Community/CreatePostLink";
import Posts from "@/app/communicate/Post/Posts";
import About from "@/app/communicate/components/Community/About";

interface CommunityPageProps {
  communityData: Community;
}

const CommunityPage: React.FC<CommunityPageProps> = ({ communityData }) => {
  const [user, loadingUser] = useAuthState(auth);

  const [communityStateValue, setCommunityStateValue] = useRecoilState(communityState);

  // useEffect(() => {
  //   // First time the user has navigated to this community page during session - add to cache
  //   const firstSessionVisit =
  //     !communityStateValue.visitedCommunities[communityData.id!];

  //   if (firstSessionVisit) {
  //     setCommunityStateValue((prev) => ({
  //       ...prev,
  //       visitedCommunities: {
  //         ...prev.visitedCommunities,
  //         [communityData.id!]: communityData,
  //       },
  //     }));
  //   }
  // }, [communityData]);

  useEffect(() => {
    setCommunityStateValue((prev) => ({
      ...prev,
      currentCommunity: communityData,
    }));
  }, [communityData]);

  // Community was not found in the database
  if (!communityData) {
    return <CommunityNotFound />;
  }

  return (
    <>
      <Header communityData={communityData} />
        {/* Left Content */}
        <>
          <CreatePostLink />
          <Posts
            communityData={communityData}
            userId={user?.uid}
            loadingUser={loadingUser}
          />
        </>
        {/* Right Content */}
        <>
          <About communityData={communityData} />
        </>
    </>
  );
};

export default CommunityPage;

export async function GET(context: GetServerSidePropsContext) {
  console.log("GET SERVER SIDE PROPS RUNNING");

  try {
    const communityDocRef = doc(
      firestore,
      "communities",
      context.query.community as string
    );
    const communityDoc = await getDoc(communityDocRef);
    return {
      props: {
        communityData: communityDoc.exists()
          ? JSON.parse(
              safeJsonStringify({ id: communityDoc.id, ...communityDoc.data() }) // needed for dates
            )
          : "",
      },
    };
  } catch (error) {
    // Could create error page here
    console.log("getServerSideProps error - [community]", error);
  }
}

I have tried a bunch of different solution and looked at different threads for compatible solutions but am unable to solve it. Help would be appreciated