How to Implement Page Caching
I’m developing an admin panel, and users will frequently navigate between different feature pages. If every page transition requires reloading data, it would lead to a very poor experience. Is there a way to cache the pages? For example, when a user switches back from route A to route B, they should still see the content as they left it, including the scroll position, data, etc.
1 Reply
If you are using solid-start then browser back will restore the scroll position by default.
With the
useBeforeLeave helper you can check if the to route is equal to the previous route. (You either need to implement the Memory router or track the previous route yourself). And the prevent.default() the event and trigger the history.before() to restore the scroll position.
https://docs.solidjs.com/solid-router/reference/primitives/use-before-leave
Regading caching. Currently the there's no caching mechanis besides the 5 seconds deduping "cache" of the query wrapper function build into @solidjs/router
You might want to take a look at Tanstack query which is great for dashboards. It'll has an api for caching which gives you total control.
https://tanstack.com/query/latest/docs/framework/solid/quick-startTanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
