Next.js Discord

Discord Forum

Hydration Failed

Answered
Spectacled Caiman posted this in #help-forum
Open in Discord
Spectacled CaimanOP
Once i remove this code, this error goes and im unsure why this would be the code causing it. I'm using a ssr: false component on the game as well as zustand for localstorage.
const [inviteType, setInviteType] = useState<'generate' | 'custom'>(guildStore?.inviteType ?? 'generate');

guildStore is the result of the localstorage
Answered by James4u
there is a couple of tricky ways but I would recommend merge two components into one and lazy load that component with ssr: false
View full answer

18 Replies

@James4u https://nextjs.org/docs/messages/react-hydration-error#solution-2-disabling-ssr-on-specific-components https://nextjs.org/docs/messages/react-hydration-error#solution-3-using-suppresshydrationwarning
Spectacled CaimanOP
I fixed it by changing this
- const [inviteType, setInviteType] = useState<'generate' | 'custom'>(guildStore?.inviteType ?? 'generate');
+ const [inviteType, setInviteType] = useState<'generate' | 'custom'>('generate');
+ useEffect(() => {
+  setInviteType(guildStore?.inviteType ?? 'generate');
+ }, [guildStore?.inviteType]);
how could I check if an no ssr component is loading?
you want to show some fallback ui?
@James4u what do you mean by loading?
Spectacled CaimanOP
the gray element is a no ssr element which has a loading state, and my element below it is supposed to only show once the no ssr component has loaded
i essentially want that bottom element to only load once the no ssr component is loaded
this is the value of Choices
import dynamic from "next/dynamic";

const Choices = dynamic(() => import('./Choices'), {
    ssr: false,
    loading: () => <div className="h-8 w-full bg-gray-800 animate-pulse rounded-md" />
});

export default Choices;
James4u
there is a couple of tricky ways but I would recommend merge two components into one and lazy load that component with ssr: false
Answer
@James4u there is a couple of tricky ways but I would recommend merge two components into one and lazy load that component with `ssr: false`
Spectacled CaimanOP
is it possible to load them with ssr: false from the same file?
e.g. instead of using import, just use the name of the function
James4u
you mean named export?
but it's better to merge two component into and and dynamically import it.
Spectacled CaimanOP
i dont want to make another file for this component specifically, so i was going to just put it in the same file but under its own function
Spectacled CaimanOP
@James4u thanks!