Next.js Discord

Discord Forum

Error: Text content does not match server-rendered HTML.

Unanswered
Weevil parasitoid posted this in #help-forum
Open in Discord
Weevil parasitoidOP
//NavbarServer.tsx
import api from '@/lib/api-axios';
import NavbarClient from './NavbarClient';

async function getMe() {
  return api
    .get('/info/getMe')
    .then((res) => res.data)
    .catch((err) => {});
}

export default async function NavbarServer() {
  const data = await getMe();
  return (
    <>
      { <NavbarClient user={data} />}
    </>
  );
}

NavbarClient.tsx
'use client'
import { useAuthStore } from "@/store/persistStore"
import { useEffect } from "react";

export default function NavbarClient({ user } : { user: any }){
  const { user: storeUser , setUser } = useAuthStore(); // zustand store
  useEffect(() => {
    setUser(user)
  }, [])
  return <h1>
    { storeUser ? 'logout' : 'login' }
  </h1>
}

I am making simple Navbar in Next.js 13.4.8
I am getting as bellow warrning issue 🤦‍♀️
Error: Text content does not match server-rendered HTML.
Warning: Text content did not match. Server: "login" Client: "logout"
See more info here: https://nextjs.org/docs/messages/react-hydration-error

what is my wrong?

22 Replies

Weevil parasitoidOP
not reply?
rphlmr 🫡
It is because when the server renders your page (SSR), storeUser is undefined (because it comes from zustand and is only available after hydration, client-side).
NavbarClient.tsx
'use client'
import { useAuthStore } from "@/store/persistStore"
import { useEffect } from "react";

export default function NavbarClient({ user } : { user: any }){
  const { user: storeUser , setUser } = useAuthStore(); // zustand store
  useEffect(() => {
    setUser(user)
  }, [])
  return <h1>
    { (storeUser || user) ? 'logout' : 'login' }
  </h1>
}

Maybe
But I think, here, you don't really need useAuthStore since your client component gets its props from a server component.
*It is fine to setUser here if you rely on useAuthStore anywhere on your app.
Weevil parasitoidOP
thanks for your reply
If so, how to I can overwrite server store to client store? like next-redux-wrapper
I am getting user info from server
and then I have to save user info in client store
make sense my goal?
Giant panda
@dank() this one
dank()
ty
Weevil parasitoidOP
Did you understand my goal?
I wanna always overwrite server state with client state(zustand library)
this is possible?
dank()
um I'm not sure what you mean but your error suggests there's a hydration problem if I'm not wrong
Weevil parasitoidOP
Generally, in React, logged in user status is managed with zustand.

However, in Next.js, we try to obtain logged in user information from the server and synchronize the client status.

Please let me know what is wrong
dank()
@Weevil parasitoid
could you try doing this
add this to your /hooks
import { useEffect, useState } from "react";

export const useMounted = () => {
  const [mounted, setMounted] = useState<boolean>(false);
  useEffect(() => {
    setMounted(true);
    return () => {
      setMounted(false);
    };
  }, []);
  return mounted;
};

NavbarClient.tsx
'use client'
import { useMounted } from "@/_lib/hooks/useMounted";
import { useAuthStore } from "@/store/persistStore"
import { useEffect } from "react";

export default function NavbarClient({ user } : { user: any }){
  const { user: storeUser , setUser } = useAuthStore(); // zustand store
  const isMounted = useMounted();
  useEffect(() => {
    if(isMounted){
        setUser(user)
    }
  }, [isMounted])
  return isMounted?
  <h1>
    { storeUser ? 'logout' : 'login' }
  </h1>:null
}
Weevil parasitoidOP
ok let me try
thanks
dank()
@Weevil parasitoid does the error persist?
Weevil parasitoidOP
sorry late reply
@dank() <@974208902143045663> does the error persist?
Weevil parasitoidOP
wow working well
Thanks 👍
dank()
glad to hear
Eastern Carpenter bee
This is workaround?