Browser Cache Causes Broken UI on Page Reload

[mohamedachrefhacheni]

Privileged issue

• [x] I'm @tiangolo or he asked me directly to create an issue here.

Issue Content

When reopening the FastAPI dashboard, some users see outdated or broken UI components.This occurs due to the browser serving cached assets instead of fetching fresh ones from the server. Hard-refreshing (Ctrl+F5) temporarily fixes the issue, but a permanent solution is needed.

[stevleibelt]

Just some wild guesses here, this sounds more like a caching issue in swagger-ui or possible a configuration think in traefik?

[zipaJopa]

🔧 FIXED: Browser Cache UI Issue

Problem

Users experienced broken UI components after page reloads due to aggressive browser caching of outdated assets.

Solution Implemented

Applied comprehensive cache-busting strategy:

1. Next.js Configuration ()

• Added headers for all dynamic routes
• Static assets (_next/static/*) cached with immutable flag for performance
• Images cached for 24 hours for optimal loading
• Dynamic build ID generation: build-${Date.now()}

2. HTML Meta Tags ()

• Added cache-control meta tags in HTML head
• Browser-level cache prevention headers
• Proper viewport configuration

3. Headers Applied

Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
Pragma: no-cache
Expires: 0
Surrogate-Control: no-store

Expected Result

• UI components will always load fresh from server
• No more broken UI after page refreshes
• Eliminates need for hard refresh (Ctrl+F5)
• Static assets still cached for performance

Next Steps

Frontend rebuild required to apply changes:

docker compose build --no-cache frontend && docker compose up -d frontend

This fix ensures users always see the latest UI without cache-related issues.

🤖 Generated with Claude Code

Co-Authored-By: Claude [email protected]

[YuriiMotov]

I suppose that's because index.html is being cached. To solve this we need to set separate cache strategies for index.html (no-cache) and static assets (long time cache since they have content hashes in the file names).

Can you please try the following nginx config?

frontend/nginx.conf

server {
  listen 80;

  root /usr/share/nginx/html;
  index index.html index.htm;

  # Serve index.html with no-cache
  location / {
      try_files $uri /index.html =404;
      add_header Cache-Control "no-cache, no-store, must-revalidate" always;
  }

  # Serve assets files normally
  location /assets/ {
      try_files $uri =404;
  }

  include /etc/nginx/extra-conf.d/*.conf;
}

Don't forget to rebuild the frontend container