docs: add CDN optimization as possible hydration error cause (vercel#…

…52489) At my work, we use Cloudflare as our CDN, and it has various optimization options for the served code including the "Auto Minify" feature that can minify JS, HTML and CSS to reduce download speed. After months of trying to update React to version 18, I have finally found out that the "Auto Minify" was the root cause of the problem, not anything in our code such as invalid tag nesting or printing dates. Because of that, I thought it would be helpful to add CDN as a possible place for investigating hydration errors. Co-authored-by: Steven <[email protected]>
MLH-Fellowship · Jul 10, 2023 · 8360ca0 · 8360ca0
1 parent 810f0e8
commit 8360ca0
Showing 1 changed file with 1 addition and 0 deletions.
diff --git a/errors/react-hydration-error.mdx b/errors/react-hydration-error.mdx
@@ -20,6 +20,7 @@ Hydration errors can occur from:
 4. [Browser extensions](https://github.com/facebook/react/issues/24430) modifying the HTML
 5. Incorrectly configured [CSS-in-JS libraries](https://nextjs.org/docs/app/building-your-application/styling/css-in-js)
    1. Ensure your code is following [our official examples](https://github.com/vercel/next.js/tree/canary/examples)
+6. Incorrectly configured Edge/CDN that attempts to modify the html response, such as Cloudflare [Auto Minify](https://developers.cloudflare.com/speed/optimization/content/auto-minify/)
 
 ## Possible Ways to Fix It