Issue with hydration error when loading script
Unanswered
Lilac posted this in #help-forum
LilacOP
Hey guys, I have a script that loads after page load, which then adds some HTML in to the page (they're reviews, essentially, populating a pre-defined div). I am getting a hydration error since the page is SSR'd (using pages router). What is the solution to fixing this? The script itself works completely fine, but the hydration errors persist in all scenarios mentioned below. I cannot use getStaticProps to solve this issue due to the build times and because there's some live data we always need.
What I have tried:
-- Adding the script via the Next Script tag.
-- Adding the script inside a useEffect, then adding the script to the DOM manually and cleaning up.
-- Dynamically importing the module, with ssr: false.
-- Adding a check for the window object and only loading/adding script if it exists
What I have tried:
-- Adding the script via the Next Script tag.
-- Adding the script inside a useEffect, then adding the script to the DOM manually and cleaning up.
-- Dynamically importing the module, with ssr: false.
-- Adding a check for the window object and only loading/adding script if it exists
7 Replies
LilacOP
Bump.
Can you try setting strategy to lazyOnLoad?
or beforeInteractive
otherwise your only option is to
suppressHydrationWarning since it is already the expected behaviourLilacOP
@Anay-208 | Ping in replies thanks, I tried both and both still cause the hydration error. Also suppressHydrationWarning gets ignored by React because too many things change inside the div that the script attaches to.
I don't think suppressHydrationWarning should get ignored.
Can you give min repro repo if possible