Page displaying raw HTML / JS Text with Self Hosted Nextjs and Cloudflare Cache Rules
Answered
Short-tailed Hawk posted this in #help-forum
Short-tailed HawkOP
(I added a image with the error at the comments)
I have a self hosted Nextjs App, using Coolify and Cloudflare, when I enable a Cloudflare Cache rule to "All incoming requests" some pages start to present this problem. Im pretty sure that I did something wrong, I tried some other values instead of cache "All incoming requests" but it did not work. The page receives a 304 HTTP Status (Not modified)
I have a self hosted Nextjs App, using Coolify and Cloudflare, when I enable a Cloudflare Cache rule to "All incoming requests" some pages start to present this problem. Im pretty sure that I did something wrong, I tried some other values instead of cache "All incoming requests" but it did not work. The page receives a 304 HTTP Status (Not modified)
Answered by B33fb0n3
you did everything right. However: you only see the stuff that get changed. And it's not translated by nextjs so you see the raw stuff.
What can you do again this?
- Not caching it by CF.
- Using raw a-tags (instead of
What can you do again this?
- Not caching it by CF.
- Using raw a-tags (instead of
Link Component from nextjs) so it causes a full page load instead of chaning only the relevant content7 Replies
Short-tailed HawkOP
@Short-tailed Hawk (I added a image with the error at the comments)
I have a self hosted Nextjs App, using Coolify and Cloudflare, when I enable a Cloudflare Cache rule to "All incoming requests" some pages start to present this problem. Im pretty sure that I did something wrong, I tried some other values instead of cache "All incoming requests" but it did not work. The page receives a 304 HTTP Status (Not modified)
you did everything right. However: you only see the stuff that get changed. And it's not translated by nextjs so you see the raw stuff.
What can you do again this?
- Not caching it by CF.
- Using raw a-tags (instead of
What can you do again this?
- Not caching it by CF.
- Using raw a-tags (instead of
Link Component from nextjs) so it causes a full page load instead of chaning only the relevant contentAnswer
Short-tailed HawkOP
Would this also happen if I use Cloudfront instead of Cloudflare? Im planning to move to Cloudfront in the future, but as you said I belive it would result in the same problem. Shame I cannot use Link component for that
@B33fb0n3 you did everything right. However: you only see the stuff that get changed. And it's not translated by nextjs so you see the raw stuff.
What can you do again this?
- Not caching it by CF.
- Using raw a-tags (instead of Link Component from nextjs) so it causes a full page load instead of chaning only the relevant content
Silver cyprinid
so was the issue caching cloudflare?
@Silver cyprinid so was the issue caching cloudflare?
this is the problem then: https://nextjs-forum.com/post/1305588861111504948#message-1305589355468947486 <--- click
"... instead of chaning only the relevant content"when using CF cache it sends the raw stuff, without translating it by nextjs itself