Cache busting strategies in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use cache busting in Flask apps?

What is the main reason to implement cache busting strategies in a Flask web application?

A To reduce server CPU usage by caching database queries

B To prevent users from accessing the app when offline

C To speed up the Flask app startup time

D To ensure users always load the latest version of static files like CSS and JavaScript

💡 Hint

Think about how browsers handle static files and updates.

Cache busting forces browsers to fetch updated static files by changing their URLs, avoiding stale cached versions.

❓ component_behavior

intermediate

Flask static file URL with cache busting

Given this Flask template code snippet, what will be the rendered URL for the static file if the file's last modified time is 1680000000?

<link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=timestamp) }}">

Assume timestamp = 1680000000.

A /static/style.css?v=1680000000

B /static/style.css?version=1680000000

C /static/style.css#1680000000

D /static/style.css?v=

💡 Hint

Look at the query parameter name used in the code.

The url_for function adds the v query parameter with the timestamp value, resulting in /static/style.css?v=1680000000.

📝 Syntax

advanced

Correct way to add cache busting in Flask static URL

Which of the following Flask template snippets correctly adds a cache busting query parameter using the file's last modified time?

{% raw %}{% set timestamp = os.path.getmtime('static/app.js') %}
<script src="{{ url_for('static', filename='app.js', v=timestamp) }}"></script>{% endraw %}

A

{% raw %}{% set timestamp = os.path.getmtime('static/app.js') %}
<script src="{{ url_for('static', filename='app.js') }}?v={{ timestamp }}"></script>{% endraw %}

B {% raw %}<script src="{{ url_for('static', filename='app.js') }}?v={{ os.path.getmtime('static/app.js') }}"></script>{% endraw %}

C

{% raw %}{% set timestamp = os.path.getmtime('static/app.js') %}
<script src="{{ url_for('static', filename='app.js', v=timestamp) }}"></script>{% endraw %}

D {% raw %}<script src="{{ url_for('static', filename='app.js', version=os.path.getmtime('static/app.js')) }}"></script>{% endraw %}

💡 Hint

Remember that template code cannot call Python functions directly without context.

Option C correctly sets the timestamp in a template variable and passes it as a query parameter in url_for. Other options either misuse Python calls or append query parameters incorrectly.

🔧 Debug

advanced

Why does cache busting not work in this Flask app?

Consider this Flask route snippet:

from flask import Flask, url_for, render_template
import os

app = Flask(__name__)

@app.route('/')
def index():
    timestamp = os.path.getmtime('static/style.css')
    return render_template('index.html', timestamp=timestamp)

And the template snippet:

<link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=timestamp) }}">

Users report their browsers still load old CSS after updates. What is the most likely reason?

A Flask's url_for does not support extra query parameters

B The static file path in getmtime is incorrect or relative to the wrong directory

C The template does not include the timestamp variable

D The query parameter 'v' is ignored by browsers for CSS files

💡 Hint

Check how file paths are resolved in Python.

If the path to 'static/style.css' is wrong, getmtime will fail or return an old timestamp, so the URL does not change and cache busting fails.

❓ state_output

expert

Output URL with dynamic cache busting in Flask

Given this Flask app snippet:

from flask import Flask, url_for, render_template
import os

app = Flask(__name__)

@app.context_processor
def inject_timestamp():
    try:
        timestamp = int(os.path.getmtime('static/main.js'))
    except FileNotFoundError:
        timestamp = 0
    return dict(timestamp=timestamp)

@app.route('/')
def index():
    return render_template('index.html')

And this template snippet:

<script src="{{ url_for('static', filename='main.js', v=timestamp) }}"></script>

What will be the output URL if the file static/main.js was last modified at UNIX timestamp 1681234567?

A /static/main.js?v=1681234567

B /static/main.js?v=0

C /static/main.js

D /static/main.js?v=

💡 Hint

Consider how the context processor injects variables into templates.

The context processor adds timestamp to all templates. Since the file exists, its last modified time is used as the query parameter value.

Practice

1. What is the main purpose of cache busting in Flask applications?

easy

A. To force browsers to load updated static files by changing their URLs

B. To speed up the server response time by caching database queries

C. To reduce the size of static files by compressing them

D. To prevent users from accessing static files

Solution

1. Step 1: Understand cache behavior in browsers

   Browsers cache static files to avoid re-downloading them on every visit, which improves speed.

2. Step 2: Identify the role of cache busting

   Cache busting changes the URL of static files so browsers fetch the new version instead of using the cached one.

3. Final Answer:

   To force browsers to load updated static files by changing their URLs -> Option A

4. Quick Check:

   Cache busting = force reload updated files [OK]

Hint: Cache busting changes URLs to refresh files in browser cache [OK]

Common Mistakes:

• Confusing cache busting with server-side caching
• Thinking cache busting compresses files
• Believing cache busting blocks file access

2. Which of the following is the correct way to add a version query parameter for cache busting in Flask's url_for function?

easy

A. url_for('static', filename='style.css', _anchor='1.0')

B. url_for('static', filename='style.css?v=1.0')

C. url_for('static', filename='style.css', v='1.0')

D. url_for('static', filename='style.css', _external='1.0')

Solution

1. Step 1: Recall how url_for adds query parameters

   Any extra keyword arguments in url_for become query parameters in the URL.

2. Step 2: Identify the common cache busting parameter name

   v='1.0' is the common short form used for cache busting, adding ?v=1.0.

3. Final Answer:

   url_for('static', filename='style.css', v='1.0') -> Option C

4. Quick Check:

   Extra args in url_for = query params [OK]

Hint: Extra args in url_for become query parameters [OK]

Common Mistakes:

• Putting version query string inside filename argument
• Using special parameters like _anchor (adds fragment, not query)
• Using _external (absolute URL, no query param)

3. Given this Flask template snippet:

<link rel="stylesheet" href="{{ url_for('static', filename='app.css', v='2.1') }}">

What will be the rendered href attribute in the HTML?

medium

A. /static/app.css

B. /static/app.css?version=2.1

C. /static/app.css?v=app.css

D. /static/app.css?v=2.1

Solution

1. Step 1: Understand how url_for builds URLs

   url_for('static', filename='app.css', v='2.1') creates a URL to the static file with a query parameter v=2.1.

2. Step 2: Construct the full URL

   The URL will be /static/app.css?v=2.1 because filename sets the path and v adds the query string.

3. Final Answer:

   /static/app.css?v=2.1 -> Option D

4. Quick Check:

   url_for adds query param v=2.1 [OK]

Hint: url_for adds extra args as query strings [OK]

Common Mistakes:

• Confusing parameter name 'v' with 'version'
• Forgetting the query parameter appears in URL
• Assuming no query string is added

4. You added cache busting by appending v='1.0' in url_for, but after updating your CSS file, the browser still loads the old styles. What is the most likely cause?

medium

A. The static folder is missing from your project

B. You forgot to update the version string to a new value

C. Flask does not support query parameters in url_for

D. The filename parameter in url_for is incorrect

Solution

1. Step 1: Understand cache busting requires version change

   Browsers cache files by URL. If the version string stays the same, the URL doesn't change, so the browser uses cached files.

2. Step 2: Identify why old styles load

   If the version string is not updated after file changes, the browser won't request the new file.

3. Final Answer:

   You forgot to update the version string to a new value -> Option B

4. Quick Check:

   Version string must change to bust cache [OK]

Hint: Change version string when files update to bust cache [OK]

Common Mistakes:

• Assuming Flask ignores query parameters in url_for
• Not verifying static folder presence
• Changing filename without updating version

5. You want to implement cache busting in a Flask app so that static files update only when changed. Which approach is best to automate this?

hard

A. Use the file's last modified timestamp as a query parameter in url_for

B. Disable browser caching completely in Flask configuration

C. Manually update a version string in url_for every time files change

D. Rename static files randomly on every request

Solution

1. Step 1: Consider manual version updates

   Manually updating version strings is error-prone and tedious.

2. Step 2: Use file modification time for automation

   Using the file's last modified timestamp as a query parameter ensures the URL changes only when the file changes, automating cache busting.

3. Step 3: Evaluate other options

   Disabling caching hurts performance; renaming files randomly breaks references and is inefficient.

4. Final Answer:

   Use the file's last modified timestamp as a query parameter in url_for -> Option A

5. Quick Check:

   File timestamp automates cache busting [OK]

Hint: Use file timestamps to automate cache busting [OK]

Common Mistakes:

• Relying on manual version updates only
• Disabling caching instead of busting
• Random renaming causing broken links