recently I migrated my Blog from Hugo to timlrx/tailwind-nextjs-starter-blog
I deploy the blog via Netlify and serve it via Cloudflare proxy.
how to see the problem
open browser console, you'll see errros like this:
4f0b14e9-f6a6045a21104f01.js:1 Uncaught Error: Minified React error #425; visit https://reactjs.org/docs/error-decoder.html?invariant=425 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at si (4f0b14e9-f6a6045a21104f01.js:1:140010) at tJ (4f0b14e9-f6a6045a21104f01.js:1:23531) at 4f0b14e9-f6a6045a21104f01.js:1:94483 at oR (4f0b14e9-f6a6045a21104f01.js:1:98923) at oM (4f0b14e9-f6a6045a21104f01.js:1:90251) at 4f0b14e9-f6a6045a21104f01.js:1:86358 at 4f0b14e9-f6a6045a21104f01.js:1:86365 at oy (4f0b14e9-f6a6045a21104f01.js:1:86470) at E (629-498c73b757a747b0.js:1:94713) at MessagePort.C (629-498c73b757a747b0.js:1:95266)
what is "Uncaught Error: Minified React error #425" ?
Error Decoder In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.
We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original text of the error.
The full text of the error you just encountered is:
Text content does not match server-rendered HTML.
note: Netlify blog also post an article about the "Text content does not match server-rendered HTML" issue, but our's problem is not the same like that one.
how I got the solution?
next build && next serve everything is fine.
go to Cloudflare site config: Caching -- Configuration
enable "Development Mode", everything is fine.
so it is a Cloudflare caching problem with Next.js
go to Cloudflare site config: Speed -- Optimization
switch to "Content Optimization" tab, then scroll down to "Auto Minify" and uncheck "HTML" checkbox.
for fast the cache expire progress, we can go to Cloudflare site config:
Caching -- Configuration -- Purge Cache and click "Purge Everything" button and confirm.