flask templates: nginx cache or serve static assets called in jinja markups

Question

I want to better understand the logic of how flask serves jinja templates behind ningx.

My goal is to optimize loading time, by caching or make ningx serves JS, CSS and if possible fragment of html's template that is not dynamic .

UPDATED based on comment

How can I test which service between Ningx and Flask serves the static assets called in html template by jinja markup as src="{{ url_for('static', filename='static/js/pageScript.js'}} ?

I would like to delegate static assets to Nginx as much as possible, and I would like to understand which does which with the following configuration.

As example, all JS, CSS called from page.html template are the same for all the <int:ids> of the route /path/ :

@application.route('/path/<int:id>/')
def graph_template(id):
    meta = {'og:title':'the title of my page is about element ID'}
    return render_template('page.html', meta=meta)

The only dynamic part is the <meta> fragment, but in the template I will call JS and CSS by:

<script type="text/javascript" src="{{ url_for('static', filename='static/js/pageScript.js') }}"></script> ?

• does flask serve the whole final html template, including js and css ? or
• does flask serve only the html page, while js and css are served by nginx ? or
• or would it be even possible to make flask serve a portion of the html, and let nginx serve the complete html page and assets?
• how to cache js and css elements which are commons in dynamic jinja templates?

In this other question: [ Flask: Caching static files (.js, .css) is suggested to use nginx serving static elements, but here I have dynamic elements called via jinja markup and it is not clear to me which service is handling what.

---

My nginx configuration use these blocks for routing /static/ and /path/:

location /static {
alias /var/www/mySite/static;
}

location /path/ {
   include uwsgi_params;
   uwsgi_pass unix:/var/www/mySite/myApp.sock;
}

Jijnja markup in Page.html template for calling assets:

<script type="text/javascript"  src="{{ url_for('static', filename='static/js/pageScript.js') }}"></script>

rendered: src=/static/js/pageScript.js

Structure of flask app is:

/app.py
/templates/page.html
/static/js/pageScript.js

Answer 1

The easiest way to see what is actually being served by what is to add a custom header to each element that could be serving something and then track which header(s) are returned:

# In your application setup code:
@app.after_request
def add_served_by_flask_header(response):
    response.headers["X-Served-By-Flask"] = "true"
    return response

And in your nginx configuration:

location /static {
    alias /var/www/mySite/static;
    add_header X-Served-By-NGINX true always;
}

That said, it looks like you should see that your markup is served by Flask but your static files will be served by nginx. Flask generates the markup dynamically, but when the browser goes to download the file pointed at by the HTML nginx handles it without needing to invoke Flask.