如何验证Firebase Functions中CDN缓存静态内容的加载状态？

Hey there! Let's tackle your three key questions step by step, using your provided Express/React SSR code as context.

1. How to Verify Content Comes From CDN Cache (Not Function Execution) After Clearing Browser Cache? #

When you clear your browser cache and refresh, here are reliable ways to confirm the CDN served cached content instead of triggering your Cloud Function:

• Check HTTP Response Headers: Use your browser's DevTools (Network tab, select the main document request):
  • Look for the X-Cache header (Firebase Hosting uses Cloudflare under the hood). A value like HIT means the CDN served cached content; MISS means it hit your function to generate fresh content.
  • Bonus trick: Add a temporary custom header in your function code to track execution. For example, right before setting Cache-Control, add:

    res.set('X-Function-Ran', 'yes');
    

    If the CDN hits the cache, this header won't appear in the response—since the CDN only stores the first response from your function. If it's missing, you know the CDN served cached content.
• Check Firebase Function Logs: Go to the Firebase Console → Functions → Logs. If the CDN served cached content, there won't be a new execution log entry for that request. Every time your function runs, a new log line appears (like Function execution started/finished).

2. How to Confirm Cache is Working? #

Beyond the above checks, here are additional ways to validate your cache setup:

• Inspect the Age Header: In DevTools Network tab, look for the Age header. It tells you how many seconds the content has been cached by the CDN. If it's greater than 0 and less than your s-maxage=1200, the cache is working as expected.
• Repeat Requests Without Clearing Cache: After the first request, refresh your browser without clearing cache. In the Network tab, the request's Size column should show from disk cache or from memory cache (browser-level cache) or the X-Cache: HIT header (CDN-level cache).
• Monitor Function Execution Count: In Firebase Console → Functions → Metrics, check the "Invocations" graph. If cache is working, the number of invocations should be far lower than the total number of user requests (since CDN serves most requests).

3. Does firebase serve --only functions,hosting Behave the Same as Production? #

Short answer: No, there are key differences—especially around caching and execution environment:

• No CDN Cache: The local emulator doesn't replicate Firebase Hosting's CDN layer. Every request will directly hit your local Express function, so s-maxage has no effect. You won't see any CDN-specific headers like X-Cache or Age.
• Function Environment Differences:
  • Local functions run on your machine with default resources (no memory/timeout limits like production Cloud Functions, which have default 256MB memory and 60-second timeout).
  • Environment variables: Local functions use values from a .env file (if you set one), while production uses variables configured in the Firebase Console.
• Hosting Behavior: Local Hosting serves static files directly from your project directory, while production Hosting uses CDN caching for static assets and routes requests to functions as configured.
• HTTPS: Local emulator uses HTTP (or self-signed HTTPS with --ssl), while production uses valid SSL certificates.

Quick Note on Your Cache Header #

Your current Cache-Control header is correctly set for both browser and CDN:

• max-age=1200: Tells browsers to cache content for 20 minutes.
• s-maxage=1200: Tells the CDN (Firebase Hosting) to cache content for 20 minutes, overriding max-age for shared caches.

内容的提问来源于stack exchange，提问作者Matthew Rideout