Dynamic Blog Posts and SEO/metatags
Hello,
I have a question I’m trying to resolve regarding blog posts and dynamic routing with SEO. I have created a new web for our company, and when it comes to blog posts they are fetched from external CMS system we’re using. The app loading works as follows:
1. store for blogs is initialized with call to api/blog which calls the external api
2. all of the blogs are stored in pinia with persistence in session storage -> so the external api is called only once unless refreshed
3. subsequently the pages/blog/[id].vue loads the blog from store instantly, with useHead filling up with metatags from api
This works well, however, only after the blog loads. For example, the preview of the blog link in messaging app/social media, is the same as in app.vue. Once the blog is loaded and the useHead filled with data from api, the SEO/metatags are appearing correctly in browser. I’m guessing that the problem is I am handling all of this on client side instead of server side? Can somebody advise me on how to solve this efficiently? I don’t want to make external api calls more than once (upon loading the website)
6 Replies
why don't you use the data from the API directly during SSR? (and save them afterwards in the store + persist it)
if you use
useFetch or useAsyncData the request will automatically be deduped between server -> client and it will fix the issuethanks for your replies / suggestions. One more question here: the external api is unfortunately limited, therefore I have to make a call to fetch all of the blogs at once. Are you suggesting I should have this call in my server/api/blog.ts and then call that api directly from the component [id].vue? Second question, is storing this in pinia even a good approach? I started to look at something like caching the response on server side https://dev.to/ymir/mastering-caching-in-nuxt-3-a-comprehensive-guide-22ea
DEV Community
Mastering Caching in Nuxt 3: A Comprehensive Guide
Nuxt 3 offers immense capabilities for building exceptional web applications, but optimizing their...
That's fine! You can do that in a nitro endpoint (so as you said, server/api/blog) and cache the data there via useStorage 🙂
Alexander Lichter
YouTube
Store files and K/Vs in Nuxt and Nitro - Powered by unstorage
💾 Reading and writing information is important for an application, be it for storage, caching or more. But especially with all the available runtimes and platform (think serverless, edge, ...) and storage options, it became more and more complex. Luckily, useStorage, powered by the unstorage package, can help us there! Let's see how!
---
Key po...
thank you, this worked