Data Fetching, Store and LocalStorage
Hello friends,
I am trying to understand the store lifecycle, but I have yet to find a good article / document on the topic.
I understand that there is data fetching from the server and from the client.
I was originally planning to set up a store and initializing some state from the server, for website often-updated data with usefetch server true, and some persitent data with a mix of usefetch server false and localstorage.
My issue is that I cannot control when the state is set up, and so localstorage and client side state initialization fails unless I use some kind of onMounted, getCurrentInstance and process.server shenanigans.
I want control when the state is set up, because at the moment I just get an empty {} : the state try to initialize once, fails which is normal cause SSR.
Should I just trigger some actions from the client ? This seems like a lot of boilerplate.
Any relevant resource or document ?
Is there a way to control when the store is set up ?
How would you approach this kind of thing ?
I was trying to keep things simple because all that's needed is a nicely timed localstorage getitem and setitem, but maybe I should look into some persisted state plugin.
Thank you very much for your help, insight and time
5 Replies
I was originally planning to set up a store and initializing some state from the serverDo you mean you want to populate a store at build time and bundle it with the code instead of refetching everytime? and whenever you want to change it you rebuild?
When does bundling occur relative to SSR ?
I didn't consider this, in my mind I had stable data which will not change often but might if required, so I wouldn't mind if the server fetched it during server side rendering, but I'd would like to cache the data on the client to avoid hitting the small server I plan to have. So I would then have to compare the data the server fetched vs the localstorage data that might be available, and then I thought maybe I should just fetch the data from the client and just manage this, since I'm not sure whether the server fetching would be worth it.
But if bundling it means that I am always sure to have up to date data on both the server and the client, and that the client can somehow store the app to not refetch the data everytime (which would simply transfer the load from the api backend to the nuxt backend, handled by the very same server), then it might be worth doing.
Say you call
api/posts in a component and store that result in a posts ref.
If those posts aren't changed frequently, you might want to call them at build time (when you run nuxt build) and store them as a static data. This means when the browser requests that page the server will directly returned that data and don't do any requests to api/posts again. If you updated the api data and want the website to reflect that, you'll build your app again with nuxt build and redepoloy it. This the the best performance you can get as there's no requests at all but it depends on your data being static or not changed frequently because if it changes a lot then rebuilding the app and redpolying it will take longer time than just sending the request every time
You could also want to not bundle that data at build time but also reduce requests to the server by caching onn the client.
You may want to cache it per session (If the user clicked a link to another page then went back to the same page he'll get the data immediately, but if refreshed or closed the tab and opened again the server will re-request). That's very easy by using useCachedData for useFetch and useAsyncData
You may also want to cache it with advanced configurations (even if he closes the browser, restarted the computed), and for example set a TTL for the data to expire then refetch again. That's also doable by service workers.Bundling seems very nice indeed, thank you for this explanation !
Do you know how the webpage is handled on the browser/client ? Is it requested everytime you load the page, or is it cached for few days ?
How would you go about implementing a persistent cache ?
How could I update my store only on the client ? Should I use hooks, check some document or vue variable before updating, or so ?
Do you know how the webpage is handled on the browser/client ? Is it requested everytime you load the page, or is it cached for few days ?By default a page is rendered on the server every time a browser requests it but you can change this -
prerender: Render the whole page at build time and store the result as a static file and serve it directly to each request (Same thing I was explaining but this is for the whole page instead of a component)
- swr: Render the page once at the first request and cache it. On the second request and further, serve the cached page directly but rerender it in the background and cache that result and so on.
- ssr: false (default is true): Render the whole page on the client and do nothing at the server (This is the regular SPA you get when using Vue alone).
- isr: Generate on first request and cache it until next deployment (Similar to prerender but render happens on the first request not at build time and supported only by few providers until now)
The docs has more info about this https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering