Challenge 2 / 2

My base template has a flash container where I render all my application's flash messages. It looks like this:

<div id="flash-container">
{% for flash in app.session.flashBag.get('success') %}
    <div class="alert alert-success">
        {{ flash }}
    </div>
{% endfor %}
</div>

One issue I've noticed is that once these messages are shown, they tend to reappear for a few seconds if I click the back button in my browser. This is due to the messages being cached by Turbo.

How can I avoid this from happening?

<div id="flash-container" data-turbo-cache="false">
{% for flash in app.session.flashBag.get('success') %}
    <div class="alert alert-success">
        {{ flash }}
    </div>
{% endfor %}
</div>

<div id="flash-container" data-cache="false">
{% for flash in app.session.flashBag.get('success') %}
    <div class="alert alert-success">
        {{ flash }}
    </div>
{% endfor %}
</div>

<div id="flash-container">
    <meta name="data-turbo-cache" content="false">
    {% for flash in app.session.flashBag.get('success') %}
        <div class="alert alert-success">
            {{ flash }}
        </div>
    {% endfor %}
</div>

Both A and C are correct.

Rewatch the video