Route in Dash without creating inefficient, hidden items

Question

I am inheriting a plotly Dash app which currently has an app.layout as follows:

def serve_layout():
    return html.Div(
        className="app",
        children=[
            dcc.Location(id="url", refresh=False),
            build_navbar(),
            html.Div(
                id="app-container",
                className="main-content",
                children=[
                    dcc.Store(id="usecase-store", storage_type="session", data=LiveGraph.use_case_library),
                    dcc.Store(id="gen-config-store", storage_type="session", data=LiveGraph.gen_config),
                    dcc.Store(id="control-config-store", storage_type="session", data=LiveGraph.control_config),
                    dcc.Store(id="data-config-store", storage_type="session", data=LiveGraph.data_config),
                    dcc.Store(id="data-store", storage_type="session"),
                    dcc.Store(id="liveplot-store", storage_type="session"),
                    build_settings_tab(),
                    build_simulation_tab(),
                    build_network_tab(),
                    dcc.Interval(id='graph-update', interval=1000, max_intervals=1000, n_intervals=0,
                                    disabled=True)
                ],
            ),
        ],
    )

where there are 3 separate routes for each of the build_* functions; with a callback setting {display: none} on the divs returned by the non-selected functions. I propose the following code:

def serve_layout():
    return html.Div(
        className="app",
        children=[
            dcc.Location(id="url", refresh=False),
            build_navbar(),
            html.Div(
                id="app-container",
                className="main-content",
                children=[
                    dcc.Store(id="usecase-store", storage_type="session", data=LiveGraph.use_case_library),
                    dcc.Store(id="gen-config-store", storage_type="session", data=LiveGraph.gen_config),
                    dcc.Store(id="control-config-store", storage_type="session", data=LiveGraph.control_config),
                    dcc.Store(id="data-config-store", storage_type="session", data=LiveGraph.data_config),
                    dcc.Store(id="data-store", storage_type="session"),
                    dcc.Store(id="liveplot-store", storage_type="session"),
                    dcc.Interval(id='graph-update', interval=1000, max_intervals=1000, n_intervals=0,
                                    disabled=True),
                    html.Div(id="main-content")
                ],
            ),
        ],
    )

@app.callback(Output("main-content", "children"), [Input("url", "pathname")])
def route(path):
    if path == "/":
        return build_settings_tab()
    # ...only return the individual function necessary for the path

Note that I have removed the three function calls from serve_layout() and added a div#main-content. The issue I'm running into is that I have callbacks set up to watch various inputs across the three pages, so I get an Error loading dependencies if I try to use the second code block. Is there a way around this, or do I really have to put everything in app.layout that I want to access later on? This would be really inefficient, as one of my pages creates charts and I don't want to render the charts and then set {display: none}, seems backwards and certainly sets off a lot of warning bells in my head... Are there any other solutions?

EDIT: the answer for me was that my sponser wanted to have the charts rendering at all times.