Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Next.Js Hydration failed because the initialization UI does not match what was rendered on the server

No problems shown within my code, whenever I am trying to pull out the mobilesidebar, it appears white. I get this message.

My exact message

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching in .

See more info here: https://nextjs.org/docs/messages/react-hydration-error

My code for the mobilesidebar.tsx

"use client";

import { Button } from "@/components/ui/button";

import { Menu } from "lucide-react";
import { 
    Sheet, 
    SheetContent, 
    SheetTrigger 
} from "@/components/ui/sheet";
import Sidebar from "@/components/sidebar";

const MobileSidebar = () => {
    return (
        <Sheet>
        <SheetTrigger>
        <Button variant="ghost" size="icon" className="md:hidden">
            <Menu />
        </Button>
        </SheetTrigger>
        <SheetContent side="left" className="p-0">
            <Sidebar />
        </SheetContent>
        </Sheet>
    );
}

export default MobileSidebar

please help!

Tags:

2

Answers


  1. 0

    Try to import the components that might be changing text / adding components after validating via an API call. and the import like this

    const Sheet = dynamic(() => import('@/components/ui/sheet'), { ssr: false })

    and use wherever needed

    <Sheet/>
    Login or Signup to reply.
  2. 0

    The above fix would work on the cost of losing the benefits of pre-rendering the component.

    If you still want SSR to be enabled then try checking if the code is running on client side.

    export const useIsClient = () => {
  const [isClient, setClient] = useState(false);

  useEffect(() => {
    setClient(true);
  }, []);

  return isClient;
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search