#Hydration error best practice

10 messages · Page 1 of 1 (latest)

white plaza
#

Hi. I am using Dialog from radix ui thats open based on the search params. I am experiencing hydration errors when I enter url localhost:3000?modal=login directly in the browser and I guess its because of prerendering - the dialog on the server did not render and on the client when nextjs was hydrating it did render.

I came up with two solutions but I am not sure which is better.

  1. Create smth like useClient hook like in nextjs docs
const [isClient, setIsClient] = useState(false);

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

  return (
    <Dialog
      open={isClient && params.get('modal') === 'login'}
  1. Import login modal using dynamic with ssr: false
jade grottoBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

novel wagon
white plaza
#

I guess i will stick to useEffect but I am not sure if it has any advantages over just skipping SSR

novel wagon
white plaza
#

Hm

#

I did not see any difference

#

when I tried both of these

novel wagon
#

Well… if it works it works, so…