useFetch lazy SEO
Hello Kapa
I want my website to be SEO friendly.
Can I use lazy: true with useFetch ?
2 Replies
Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hello!
If your goal is to make your website SEO friendly, you should be careful with using
- For SEO-friendly pages, avoid using
- Nuxt Data Fetching: Lazy - Nuxt useLazyFetch API ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
lazy: true with useFetch. When you set lazy: true, data fetching does not block navigation and will not be awaited during server-side rendering (SSR). This means the data may not be available in the initial HTML sent to the client, which can negatively impact SEO because search engines may not see the content that is loaded lazily after the page is rendered.
By default, useFetch will wait for the data to be fetched before rendering the page, ensuring that the content is present in the server-rendered HTML and is thus SEO friendly. If you use lazy: true, you must manually handle the loading state, and the content will not be present in the initial HTML, which is not ideal for SEO-sensitive data.
In summary:- For SEO-friendly pages, avoid using
lazy: true with useFetch for content that should be indexed by search engines.
- Use the default behavior of useFetch to ensure data is fetched and rendered on the server before sending the HTML to the client.
References:- Nuxt Data Fetching: Lazy - Nuxt useLazyFetch API ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.