How to add meta data to specific slugs in a dynamic route
Hello everyone π
I have a problem and maybe some of you can help me. I've looked through the Nuxt and Vue docs but I'm still not quite sure how to solve it. Maybe some of you have done something similar before?
I have a dynamic page:
/[slug]
I have a CMS that contains a few hundred pages and I will be using the [slug] to fetch one of those pages. The pages are all supposed to be showing different layouts/loading-skeletons based on what kind of page is being fetched.
E.g. /france should be using country-layout.vue and /paris should be using region-layout.vue
Now my issue is currenly I have to use lazy: false in my useFetch() because I don't know what kind of page is being fetched initially. This in turn causes a slight delay between page navigations which is not ideal.
I'm thinking I somehow need to know what kind of page I'm fetching based on the slug. I have an endpoint that returns all available slugs and the slugs' layout-types and I'm wondering if it's possible to use this information somehow doing build time. I want to be able to couple together slugs and their corresponding layout-types but I haven't figured out a way to solve this yet. Anyone knows a way to do it in Nuxt?
Appricate any help or ideas, Thank you! π11 Replies
I think the Nuxt layout component could help there to set the right layout based on the CMS response
The thing is i want to set the correct layout before the CMS response.... This way I won't have to block navigation until my CMS response is resolved π€
hmm, you could save these information beforehand, yes.
as idea: set up a
server api endpoint that returns that information and prerender it during build
then, you can use useFetch with that endpoint and get the response super quick, not blocking too long and then set the layoutYea I have the endpoint already. The problem is the CMS is slow as hell and the underlying dstatructure for the pages is a mess... If I don't hit a cache the response time can be upwards 20-30 seconds to get 3000 slugs π
then use swr βΊοΈ
so it will be revalidated in the background
Maybe I could create a nuxt endpoint
And use swr for that
Yea maybe that is good
exactly
Would the extra http request affect performance in any way? Assuming the response is always cached in redis next my nuxt server?
shouldn't be a problem then
it won't be an extra HTTP request on the server side actually
nitro will emulate the call, no roundtrip necessary
Aha okay thank you π I will try this tomorrow
Love the YouTube vids btw!
Thank you! π
I'll also cover more "BFF" patterns and optimizations like this one in the future!