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

Question

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!

Answer 1

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/>