Flask is not render_template before executing long function

Question

I want to create a waiting page that I can render this page before executing some long function. And when it finishes, it will redirect to success page in return. This is an simple example of code

@app.route("/process", methods=['GET', 'POST'])
def process():
    with app.app_context():
        data = render_template('waiting.html')

    ### .. Do something long and have to wait .. ###
    # e.g. sleep a few seconds

    return redirect(url_for('success'))

What's happened is that the line data = render_template('waiting.html') seems not executed. What I see is blank screen for a while (as it is processing function below). And, when it finishes, it shows success page as expected.

It seems to be a simple task that many questions have been asked here before. But those solutions are not working with me. My goal is just to make the template show up before doing a task. So that users will see that their requests are in progress.

Here are what I've tried.

• https://stackoverflow.com/a/31831773/3054766
• https://stackoverflow.com/a/30382442/3054766
• https://stackoverflow.com/a/33944561/3054766
• I considered Celery in my last project. But I found that it quite overqualified for this simple job. So I doubt that is Celery is a decent choice to choose.

Please kindly tell me if I misunderstand the concept of Flask. Thanks!

Answer 1

There are two things that you are missing here:

1. what render_template actually does
2. how the HTTP flow works

For 1 the answer is quite simple. render_template will take the path to the template you want to render and the context that you want to render the template with and return a string. So it will not do anything to the request, it will just generate a string based on the template and the context (and in your code sample, it will store this rendered string in the data variable).

For 2 what you need to understand is that when an user makes a request to your /process route it will expect a response, and only one response.

So your route needs to decide what to respond: will it be a 200 OK with some content (some HTML for example)? or a 301 Redirect that will instruct the user's browser to go to another page? You can't have both responses as it violates the protocol.

In order to achieve the experience you want you will have to instruct the user's browser to make multiple requests to your server. There are a few strategies you can use for this, but the simplest one is probably to use Ajax.

The idea is that your initial route will just render the waiting.html page, but with a twist. In the page you will add some JavaScript code that makes an Ajax request to a different route that will do the actual long running job.

So now you have two routes:

@app.route("/process", methods=['GET', 'POST'])
def process():
    if request.method == 'GET':
        return render_template('waiting.html')

    if request.method == 'POST':

        ### .. Do something long and have to wait .. ###
        # e.g. sleep a few seconds

        return 'done'

(even though it's only one method, they are essentially two routes: GET /process and POST /process)

The JavaScript in your page will look something like this:

var request = new XMLHttpRequest();
request.open('POST', '/process');

request.onload = function() {
  if (request.status === 200 && request.responseText === 'done') {
    // long process finished successfully, redirect user
    window.location = '/success';
  } else {
    // ops, we got an error from the server
    alert('Something went wrong.');
  }
};

request.onerror = function() {
  // ops, we got an error trying to talk to the server
  alert('Something went wrong.');
};

request.send();

(or if you are using jQuery)

What this will do is it will initiate another HTTP request to your server in the background that will kick-off that long running job and will receive as response the text done. When this happens, it will redirect the user to the /success page.

Now, it's important to keep in mind that this is a very simple and you need to keep somethings in mind:

1. each one of these Ajax requests will block a connection to your server, which, if you are using something like gunicorn, would be a full worker. So if your processing takes too long or if you have a lot of concurrent users accessing this route your server will be very overloaded.

2. you need to handle errors properly. In my example I always return done with a 200 OK (which is the default status code), but if something goes wrong in the processing you would return something different and possibly some kind of error message to show to the user.