Prettifying exported html output breaks hydration
Unanswered
Florida White posted this in #help-forum
Florida WhiteOP
So I'm trying to work with the output of a nextjs app.
I'm hosting this app on local, when I open a page on the browser everything seems ok, zero errors on the console
But after I run prettify on a html file I start to get hydration erros like:
There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
OR
Hydration failed because the initial UI does not match what was rendered on the server.
I have tried multiple prettifiers but I'm getting the same results
I'm hosting this app on local, when I open a page on the browser everything seems ok, zero errors on the console
But after I run prettify on a html file I start to get hydration erros like:
There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
OR
Hydration failed because the initial UI does not match what was rendered on the server.
I have tried multiple prettifiers but I'm getting the same results
3 Replies
@Florida White So I'm trying to work with the output of a nextjs app.
I'm hosting this app on local, when I open a page on the browser everything seems ok, zero errors on the console
But after I run prettify on a html file I start to get hydration erros like:
There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
OR
Hydration failed because the initial UI does not match what was rendered on the server.
I have tried multiple prettifiers but I'm getting the same results
your prettifier changed the html tree. sometimes it produces a better tree, sometimes it produces a worse tree, but all react cares is that it produces a different tree. hence react detects mismatches from the tree it generated with the tree that you prettified, leading to hydration errors.
therefore: don't prettify anything. just leave things as-is