NEXTJS : Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server

Question

page.tsx i tried removing the generateStaticParams but that did not solve the problem


import { Community } from "@/atoms/communitiesAtom";
import Header from "@/components/community/Header";
import { firestore } from "@/utils/firebase/clientApp";
import safeJsonStringify from "safe-json-stringify";
import {
  DocumentData,
  collection,
  doc,
  getDoc,
  getDocs,
} from "firebase/firestore";
import React, { FC } from "react";
import PageContent from "@/components/layout/PageContent";

interface CommunityPageProps {
  params: {
    communityId: string;
  };
}

// export const revalidate = 60;

// export async function generateStaticParams() {
//   const querySnapshot = await getDocs(collection(firestore, "communities"));
//   let docIds: string[] = [];
//   querySnapshot.forEach((doc) => {
//     // doc.data() is never undefined for query doc snapshots
//     docIds.push(doc.id);
//   });

//   return docIds.map((communityId) => ({
//     communityId,
//   }));
// }

const CommunityPage = async ({ params }: CommunityPageProps) => {
  let communityData: Community | null = null;
  const communityDoc = await getDoc(
    doc(firestore, "communities", params.communityId)
  );
  if (!communityDoc.exists())
    throw new Error("Community by that name does not exist");

  communityData = JSON.parse(
    safeJsonStringify({ id: communityDoc.id, ...communityDoc.data() })
  );

  return (
    <div>
      {communityData && <Header communityData={communityData} />}
      <PageContent>
        <>
          <div>LHS</div>
        </>
        <>
          <div>RHS</div>
        </>
      </PageContent>
    </div>
  );
};

export default CommunityPage;

Header.tsx

"use client";

import React from "react";
import { Box, Button, Flex, Icon, Text, Image } from "@chakra-ui/react";
import { FaReddit } from "react-icons/fa";
import { Community, communityState } from "../../atoms/communitiesAtom";
import useCommunityData from "../../hooks/useCommunityData";
import { useSetRecoilState } from "recoil";

type HeaderProps = {
  communityData: Community;
};

const Header: React.FC<HeaderProps> = ({ communityData }) => {
  /**
   * !!!Don't pass communityData boolean until the end
   * It's a small optimization!!!
   */
  const { communityStateValue, loading, error, onJoinLeaveCommunity } =
    useCommunityData();

  const isJoined = !!communityStateValue.mySnippets.find(
    (item) => item.communityId === communityData.id
  );

  return (
    <Flex direction="column" width="100%" height="146px">
      <Box height="50%" bg="blue.400" />
      <Flex justifyContent="center" bg="white" height="50%">
        <Flex width="95%" maxWidth="860px">
          {communityData.imageURL ? (
            <></> 
          ) : (
            <Icon
              as={FaReddit}
              fontSize={64}
              position="relative"
              top={-3}
              color="blue.500"
              border="4px solid white"
              borderRadius="50%"
            />
          )}
          <Flex padding="10px 16px">
            <Flex direction="column" mr={6}>
              <Text fontWeight={800} fontSize="16pt">
                {communityData.id}
              </Text>
              <Text fontWeight={600} fontSize="10pt" color="gray.400">
                r/{communityData.id}
              </Text>
            </Flex>
            <Flex>
              <Button
                variant={isJoined ? "outline" : "solid"}
                height="30px"
                pr={6}
                pl={6}
                onClick={() => {onJoinLeaveCommunity(communityData, isJoined)}}
                isLoading={loading}
              >
                {isJoined ? "Joined" : "Join"}
              </Button>
            </Flex>
          </Flex>
        </Flex>
      </Flex>
    </Flex>
  );
};
export default Header;

i think the error is in this component because it goes away when i remove it

i tried removing the generateStaticParams , i tried looking for invalid html but did not find any , also the error seems to go away sometimes on its own idk why.

NEXTJS : Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server

0 Answers0