Site is not cached in Cloudflare

[hunghvu]

# Response header
cache-control: private, no-cache, no-store, max-age=0, must-revalidate
cf-cache-status: BYPASS

It seems the page bypass Cloudflare cache, resulting in a very low cache hit.

• This might be due to unexpected Next.js cache header setting, need to investigate.

• This might be due to the default behavior of Cloudflare, and the link below is worth looking into:

• https://community.cloudflare.com/t/doesnt-seem-to-be-caching/502969/5

• https://developers.cloudflare.com/cache/how-to/edge-browser-cache-ttl/create-page-rules/#cache-everything

[hunghvu]

Added these rules. We will monitor for a few days to observe the behavior.

[hunghvu]

These can be useful resources:

• https://focusreactive.com/configure-cdn-caching-for-self-hosted-next-js-websites/
• https://nextjs.org/docs/pages/building-your-application/deploying/production-checklist#caching
• https://github.com/vercel/next.js/discussions/51460

[hunghvu]

After further investigation here is the observed behavior.

• HTML - bypass
• JS - cache hit
• CSS - not applicable (no CSS file)
• Fonts - no cache-related headers
• Image (in articles, ICO) - cache hit

[hunghvu]

The caching issue is due to the way Next.js sets headers. If Cloudflare ignores the headers, then it can enforce caching. Let's push this issue back to milestone v1.2. For now, a workaround in Cloudflare is sufficient. We will resolve the root cause later on.

Relates to #58, #77, #81.

[hunghvu]

Since overriding the header, the cache ratio is now at a good spot.

[hunghvu]

The cache has been working well since our fixes during v1.1 development. Two main things were implemented.

• Enforce cache header from Next.js server.
• Enforce the Edge cache rule on Cloudflare.

It is important that the status code TTL of Edge must be specified, or else the cache rule will not work.

This issue can be closed now.