Clientside cache on graphs across multipage

[pengz]

Hey there, I’ve noticed that in a multipage app each time a page is changed, the graphs have to be reloaded from the server, which causes a lot of traffic.

I have a multipage app for a lot of graphs but the data is static, is there any way we can cache the graphs on the client side, so that when switching between the pages the graphs will not reload from the server, but only reload upon the user manual request?

Thank you.

[AIMPED]

Hi @pengz, welcome to the community.

You could store the graphs in a dcc.Store() which is client side. Bit there is a limit for stored data which depends on the browser.

[pengz]

Thank you @AIMPED for replying, yes the size limit of dcc.store is also the concern here. So far I haven’t figured out a good way to optimize this.

[Emil]

You could try out dynamic components,

Preserving Filtered Data in AG Grid and Efficient Data Sharing Between Pages in Dash

There are many ways to do it. Using dash-extensions, you just place the dynamic component container similar to the page container, from dash import dash, Dash, html from dash_extensions.pages import setup_dynamic_components app = Dash(use_pages=True) app.layout = html.Div( children=[ dash.page_container, setup_dynamic_components(), ] ) if __name__ == "__main__": app.run_server() and then register the dynamic components on the pages where they should be visible, f…

I haven’t gotten around to write full docs, but the example above should give you an idea of how it works. If you don’t need to share components across pages, just include a single dynamic component on each page that holds the complete layout of the page.

[jinnyzor]

Hello @pengz,

You can check out my caching for page layouts.

Page Layout Caching

Good day, All, With my use of the Dash app, I encountered an issue where I wanted the page layouts to be cached clientside. This is different from caching on the server side, as there is no need to allow the request to event leave the client’s computer. I wanted this because I have semi-dynamic layouts that are costly to run, but dont need to be run every time the user loads the page. In fact, these layouts hardly need to change except for when I make a coding change. Thus, I took a stab at b…

Since your data is static, you shouldn’t have to worry those pitfalls that you can normally encounter.

You will use the clientside caching in the browser if HTTPS and just a local variable if you aren’t local.

[Eastonhan]

@pengz

Hey there, I’ve noticed that in a multipage app each time a page is changed, the graphs have to be reloaded from the server, which causes a lot of traffic.

I have a multipage app for a lot of graphs but the data is static, is there any way we can cache the graphs on the client side alight motion 5.0, so that when switching between the pages the graphs will not reload from the server, but only reload upon the user manual request?

My multipage Dash app reload from the server upon each page change, leading to a significant increase in server traffic. Since the data for these graphs remains static, I’m exploring ways to optimize the app’s performance. I’m particularly interested in implementing client-side caching to store the graph data locally on my browser. This would ideally prevent the graphs from reloading when I switch between pages, enhancing the app’s efficiency.