Bug: Hydration fails with statically rendered html when wrapping component in <Suspense> about react

[sophiebits]

React server rendering outputs certain markers in the stream as HTML comments and similar that are necessary for the hydration process, so it doesn't work to handcraft HTML and expect it to match up.

Instead, you can use functions from react-dom/server to render components to a string:

https://react.dev/reference/react-dom/server

Depending on your use case you can stream HTML as it's generated (so users see loading indicators that get replaced by content even before the client JS bundle loads) or wait for all Suspense boundaries to resolve if you're doing it at build time (eg https://react.dev/reference/react-dom/server/renderToReadableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation).

Hope this helps!