Cloudflare: Cache static HTML when URL has Query String

Question

Quick CloudFlare 'new user' question for you:

BACKGROUND: The HTML pages served up by my origin server never change. All dynamic content is download via JavaScript after the page is loaded in the user's browser. The dynamic content derived by the JavaScript depends in part upon the URL's query string but the query string itself has no affect on the HTML content that's originally downloaded. The following URLs therefore all generate exactly the same HTML from the origin prior to being acted upon by JavaScript in the browser:

https://www.example.com/private/my-investments?portfolioID=296

https://www.example.com/private/my-investments?portfolioID=325

https://www.example.com/private/my-investments?portfolioID=319

QUESTION: Given that CloudFlare does not cache HTML by default, how shall I construct my Page Rules so that a single cached copy of https://www.example.com/private/my-investments?[anyValue] is returned to all users? Here's what I've tried:

"CACHE EVERYTHING:" Using the 'Cache Everything' directive causes my HTML to be cached (good) but it uses the entire query string as part of the cache key (bad). So if a user hits the following URL...

https://www.example.com/private/my-investments?portfolioID=296

...and then ten seconds later hits the same URL with a different query string, like:

https://www.example.com/private/my-investments?portfolioID=325

...CloudFlare treats that latter request as a cache MISS (cf-cache-status:MISS) and hits my origin server again. This in spite of the fact that the HTML returned from the origin is identical for both URLs.

"IGNORE QUERY STRING CACHING:" I thought for sure I'd fix this problem by selecting the "IGNORE QUERY STRING CACHING" option. But when using this option in a Page Rule, no HTML is cached at all; Only .js, .css, and .png files are cached. And once again my origin gets hit for every single call for HTML data. :(

I feel like I must be missing something obvious. Any thoughts?

UPDATE: Had an idea I want to run by you. Could I solve this problem by changing my internal URL scheme to use '#' instead of '?' So instead of a URL like...

https://www.example.com/private/my-investments?portfolioID=296

..I'd use something like:

https://www.example.com/private/my-investments#portfolioID=296

This would prevent the query string parameters from being transmitted to CloudFlare at all... What do you think?

Festus

Answer 1

(Answer added for @Festus Martingale to mark question as answered).

Replacing the ? with a # solved the problem as it prevents the query string from being transmitted to cloudflare as it appears as a hash fragment.

Answer 2

You can change how Cloudflare caches your site by changing the Caching Level under Caching Configuration in the admin:

What are Cloudflare’s Caching Levels?

You can set Cloudflare’s CDN to cache static content according to these levels:

No Query String: Only delivers files from cache when there is no query string.
Ignore Query String: Delivers the same resource to everyone independent of the query string.
Standard: Delivers a different resource each time the query string changes.

We recommend using the Standard level. Learn more about caching levels.

Note: By default, Cloudflare does not cache HTML content. You can create a Page Rule to cache static HTML content.