Hello everyone: I have a question about
Hello everyone: I have a question about the vercel output on next-on-pages:
- When I manually change the index.html file (I got this index.html after running “npx @cloudflare/next-on-pages” in the folder to generate the .vercel/output/static folder) in the .vercel/output/static: I mean manually change the text in the index.html from “TestingA” to “TestingB”
- Then deploy the static asset and _worker.js to the Pages use wrangler CLI.
- But when I visit the website, I still see the text “TestingA” in the home page, even I check the response on the network tab: it show text “TestingB” (as I expected) in the index.html
Can you explain why I observed this situation?
You can see clearly in the image below:
So I change the text from “Find in-depth information about Next.js features and API.” to “Thanh Le 95”. In the response of network tab, it shows correctly but when it rendered to the home page, it is still show the original one. Why is this happening?
8 Replies
it is because react, during hydration updates the text in the components, so although you get the correct static html from the worker, your browser updates the page and replaces the text
in the console you should see a bunch of errors
basically indicating that hydration has indeed found a mismatch between what the server provided and what react expects
Minified React error #425 – React
The library for web and native user interfaces
Minified React error #418 – React
The library for web and native user interfaces
(PS: if you refresh your browser with caching disabled you will see the text flashing, at first showing the text you expect it to and then being updated to the old one)
Thank you..I got it. just try to test around to understand how cloudflare and nextjs actually work.
no problem 🙂👍
I'm always here if you need anything 😄