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.
3 Replies
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.
I don't understand the solution you said very much. I didn't use solid-start. I wanted to implement Vue's key-alive function https://vuejs.org/guide/built-ins/keep-alive
When the routing change, the page status of different PATH can be saved, and the response can be kept when switching.
Vue.js
Vue.js - The Progressive JavaScript Framework
I am not aware of a feature/component like that.
That’s why I recommended to either using tanstack query which caches the fetched data. They pages have to rendered again client-side but there’s no request to the server for already visited pages until you trigger to refetch the data.