Clientside callbacks in multi-page Dash app


I have created a multi-page Dash app whose performance I would like to optimise by implementing clientside callbacks instead of regular Dash callbacks.

My multi-page Dash app is structured with 1 page per file, as recommended in Dash’s documentation. This means that in, which is where I run the Dash app from, I declare the app variable and change the pages to be displayed according to the pathnames (code from docs):

from dash import Dash, dcc, html, Input, Output, callback
from pages import page1, page2

app = Dash(__name__, suppress_callback_exceptions=True)
server = app.server

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),

@callback(Output('page-content', 'children'),
              Input('url', 'pathname'))
def display_page(pathname):
    if pathname == '/page1':
        return page1.layout
    elif pathname == '/page2':
        return page2.layout
        return '404'

if __name__ == '__main__':

Additionally, for each page of the Dash app, I declare the layout of the page and its callbacks. Take for instance

from dash import dcc, html, Input, Output, callback

layout = html.Div([
    html.H3('Page 1'),
        {f'Page 1 - {i}': f'{i}' for i in ['New York City', 'Montreal', 'Los Angeles']},
    dcc.Link('Go to Page 2', href='/page2')

    Output('page-1-display-value', 'children'),
    Input('page-1-dropdown', 'value'))
def display_value(value):
    return f'You have selected {value}'

My issue here is in creating a clientside call back for From the clientside callbacks documentation, clientside callbacks are declared using app.clientside_callback instead of the usual @app.callback. In multipage Dash apps, callbacks are declared using @callback instead of @app.callback since the app variable is not initialised in the respective pages (such as When declaring the clientside callback as merely clientside_callback instead of app.clientside_callback, a NameError: name 'clientside_callback' is not defined is returned. How can this issue be resolved? I appreciate any responses. Thank you!

1 Like

Hi @schua16

Try adding

from dash import clientside_callback

Then you can use it like this:



import dash


This was a new feature in dash 2.0 and you can find more into in the announcement, but it looks like it hasn’t made it’s way into the docs yet.


That worked perfectly, thank you!