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

Dallaz00
February 28, 2024
100 views
0 votes
2 Answers

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!

Answers

- JuzarAntri
- February 26, 2024 at 12:43 pm
- 0 votes
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.

- AbhishekKumarSingh
- February 28, 2024 at 6:58 pm
- 0 votes
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.