# Clientside callbacks in multi-page Dash app

**URL:** <https://community.plotly.com/t/clientside-callbacks-in-multi-page-dash-app/63364>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [April 25, 2022, 3:29am UTC](https://community.plotly.com/t/clientside-callbacks-in-multi-page-dash-app/63364 "2022-04-25T03:29:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![schua16](https://avatars.discourse-cdn.com/v4/letter/s/9d8465/32.png) [@schua16](https://community.plotly.com/u/schua16)\
**Post date:** [April 25, 2022, 3:29am UTC](https://community.plotly.com/t/clientside-callbacks-in-multi-page-dash-app/63364/1 "2022-04-25T03:29:28Z")

</div>

Hi,

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](https://dash.plotly.com/urls). This means that in `app.py`, 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):

```auto
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),
    html.Div(id='page-content')
])

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

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

```

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

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

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

@callback(
    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 `page1.py`. 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 `page1.py`). 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!

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [April 25, 2022, 5:02am UTC](https://community.plotly.com/t/clientside-callbacks-in-multi-page-dash-app/63364/2 "2022-04-25T05:02:46Z")

</div>

Hi @schua16

Try adding

```auto
from dash import clientside_callback

```

Then you can use it like this:

```auto
clientside_callback(
    ....
)

```

Or:

```auto
import dash

dash.clientside_callback(
   ...
)

```

This was a new feature in dash 2.0 and you can find more into in the [announcement](https://community.plotly.com/t/dash-2-0-prerelease-candidate-available/55861#from-dash-import-callback-clientside_callback-5), but it looks like it hasn’t made it’s way into the docs yet.

---

<div class="post-metadata">

**Author:** ![schua16](https://avatars.discourse-cdn.com/v4/letter/s/9d8465/32.png) [@schua16](https://community.plotly.com/u/schua16)\
**Post date:** [April 25, 2022, 5:29am UTC](https://community.plotly.com/t/clientside-callbacks-in-multi-page-dash-app/63364/3 "2022-04-25T05:29:34Z")

</div>

That worked perfectly, thank you!