如何缓存含可变query parameter的资源？解决跨地域页面高延迟问题

Hey there, I’ve run into this exact scenario before—static pages getting crippled by dynamic URL parameters that break caching, especially when serving users across regions. Let’s break down practical, low-effort fixes to get that cache working again and cut down latency for your Japanese users:

Option 1: Use URL Hashes Instead of Query Parameters #

The hash fragment (#) in a URL never gets sent to the server, which means your static page URL stays identical from the server’s perspective—perfect for caching. You can pass the ID like this:
https://your-static-page.com#user-id=GENERATED_RANDOM_ID

Then in your JavaScript, grab the ID without hitting the server:

// Parse the hash into a search params object
const hashParams = new URLSearchParams(window.location.hash.slice(1));
const userId = hashParams.get('user-id');

This is my go-to quick fix because it requires almost no server-side changes and keeps your caching fully intact.

Option 2: Store the ID in Cookies or LocalStorage #

If you need the ID to persist across sessions or pages, skip the URL entirely and store it client-side:

• Cookies: Have your source endpoint set a cookie with the ID when the user first visits. Your JS can then read it directly:

  const userId = document.cookie.split('; ')
    .find(row => row.startsWith('user-id='))
    ?.split('=')[1];
  

  Just make sure to set appropriate path and domain values so the cookie is accessible on your static page.
• LocalStorage/SessionStorage: If the ID only needs to last the current session, SessionStorage works great. Your source can inject a script to set it on first load:

  sessionStorage.setItem('user-id', 'GENERATED_RANDOM_ID');
  

  Then your static page’s JS retrieves it with:

  const userId = sessionStorage.getItem('user-id');
  

Option 3: Configure Your CDN/Proxy to Ignore the Query Parameter #

If you absolutely need to keep the ID in the query string, tweak your CDN or reverse proxy settings to ignore that specific parameter when caching. For example:

• Most CDNs let you set a "cache key exclusion" rule—tell it to ignore user-id (or whatever your parameter name is) when generating the cache key. This way, all requests with different IDs get served the same cached page, while your JS still reads the unique ID from the URL.

Bonus: Optimize for Japanese Users #

Since your server is in the US, pairing these fixes with a CDN that has edge nodes in Japan will amplify the latency reduction. The CDN will cache your static page locally in Japan, so users don’t have to traverse the Pacific every time they load the page.

内容的提问来源于stack exchange，提问作者Alex Vaz