So we have a Nuxt3 application with a page /thing which uses data from endpoint /api/thing to render content but also for generating dynamic metadata during SSR (for SEO and social cards).
Now, pages/thing.vue uses useFetch which fetches the data during SSR (good or dynamic metadata, bad for UX since blocks navigation).
Ideally, we'd have it use useFetch if the client is navigating to /thing directly (e.g. by typing it in their browser and pressing enter) but use non-navigation-blocking useLazyFetch and show a loading page on the front-end when the client is navigating within our app.
How can that be achieved?