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.