dash: Dash Multi-Page App URLs do not always execute in the same order

Nevermind, I’m able to reproduce the issue now:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

import time

app = dash.Dash()
server = app.server
server.secret_key = 'test'


app.layout = html.Div([
    dcc.Location(id='location'),
    html.Div(id='content')
])


@app.callback(
    Output('content', 'children'),
    [Input('location', 'pathname')])
def display(path):
    print(path)
    if path is None:
        time.sleep(3)
        return ''
    elif path == '/':
        return 'index'
    else:
        return html.H3(path)


if __name__ == '__main__':
    app.run_server(debug=True, threaded=True)

The issue occurs when the intial request with pathname=None takes longer than the follow up request with pathname='/page-1'. While dash initiates the requests in order, it looks like we aren’t doing a good job of dealing with request responses that come back out of order

i just had this exact problem trying to build a similar url-based routing. this solution worked for me after trying every possible if-then, and try-except combination possible to trap the NoneType error. this bug appears to still be there. (active_route refers to a bus route, not an url route)

@app.callback(
        Output("page-content", "children"),
        [Input("url", "pathname")])
def display_page(pathname):

    if pathname is None:
        return 'Loading...'
    elif pathname == '/':
        active_route='87'
        return create_layout(app, routes, active_route)
    else:
        active_route=(pathname[1:])
        return create_layout(app, routes, active_route)

Fixed in dash-renderer==0.11.0 🎉

It just seems like a ton of traffic on page load for a responsive app after pathname updates, but not seeing a way around it given your explanation above.

If this works the way it is supposed to, then there should only be 1 extra / unnecessary API call: the first callback with pathname=None. In the grand scheme of things, this shouldn’t be a issue given that the requests and responses JSON payloads are going to be extremely tiny (the request is something like {payload: {inputs: [{id: 'location', 'prop': 'pathname', 'value': null}], outputs: [{id: 'content', 'prop': 'children'}]} and the response is just something like {'id': 'location', 'prop': 'pathname', 'value': ''}) . However, it is certainly confusing and idiosyncratic. I don’t see a good way around it given the current architecture.

For now, I’ll look into getting this to work the way it is supposed to 😅

@mjclawar Thanks for opening the issue! Here’s what’s going on here: 1 - Unspecified properties in the app.layout are set to None 2 - When the app loads, it renders the layout and then it fires off all of the callbacks that have inputs and outputs that are visible in the app. In this case, dcc.Location.pathname is None, so that gets fired off. 3 - When the dcc.Location component is rendered, its pathname property is updated to match the URL https://github.com/plotly/dash-core-components/blob/2c7c3c08319c10639eea3b8c00ae12d399eff4c7/src/components/Location.react.js#L13-L19. In doing this, it fires off a callback with it’s new pathname property.

We can’t actually set the pathname to a string in the app.layout because the app could be loaded from any url. If we set it to /page-2, then the initial callback would be fired with /page-2 even if the user loaded /page-3.

The solution that was taken in the https://plot.ly/dash/urls page and in the dash-docs (https://github.com/plotly/dash-docs/blob/c2c74e718a492217502b03739e39190c359af029/tutorial/run.py#L286-L287) was to load the index page if the pathname was None and “hope” that the user indeed loaded that URL. As you mention, this causes the page to flicker if the URL was wrong (the index content will be loaded on the first callback when pathname=None and the correct page’s content will be loaded when dcc.Location component is rendered).

The correct solution would probably be to load either a loading message or an empty string on None:

@app.callback(Output('content', 'children'), [Input('location', 'pathname')])
def update_children(pathname):
    if pathname is None:
        return 'Loading...'
    else:
        return my_content[pathname]

In fact, I’m going to update the dash-docs to do that right now.

At the moment I don’t think having a one dash instance supporting multiple urls works so well.

By updating the content in-place with use of the dcc.Link component, Dash apps are able to provide a multi-page app experience without refreshing the entire page - it’s extremely fast! Going forward, using dcc.Location and dcc.Link is the method that I “officially recommend”.