iframe, dangerouslySetInnerHTML => Hydration error
Answered
Sun bear posted this in #help-forum
Sun bearOP
Working on a blog app, and decided to move from React to Next.js. Still new to this, so while migrating code over ran into an issue. Blog posts are written in a headless cms I built, stored in a db. The frontend (next.js in this case) fetches the raw post content data, then builds a component tree from it. Things work so far, but running into hydration issues with embedded content (e.g Youtube, maps, Instagram etc).
Created a sandbox with a simplified version: https://codesandbox.io/p/devbox/hydration-issue-qcpc9q?file=%2Fapp%2Fpage.tsx%3A159%2C3
Can circumvent this by forcing the embedded component to be dynamic with noSSR, but not sure if there's a better way.
Created a sandbox with a simplified version: https://codesandbox.io/p/devbox/hydration-issue-qcpc9q?file=%2Fapp%2Fpage.tsx%3A159%2C3
Can circumvent this by forcing the embedded component to be dynamic with noSSR, but not sure if there's a better way.
Answered by Sun bear
Nevermind, I think I figured it out. In the CMS, I create self closing tags within the post content that gets saved to the db. With dangerouslySetInnerHTML, they get forced in, and Next.js doesn't like it. I'm too used to React.
1 Reply
Sun bearOP
Nevermind, I think I figured it out. In the CMS, I create self closing tags within the post content that gets saved to the db. With dangerouslySetInnerHTML, they get forced in, and Next.js doesn't like it. I'm too used to React.
Answer