N
Nuxt•4d ago
DiamondSky660

Is route.path SSR friendly ?

Is it okay to use : 
const route = useRoute()

useHead(() => ({
  title: `MyWebsite・${route.path.split('/').pop()}`
}))
const route = useRoute()

useHead(() => ({
  title: `MyWebsite・${route.path.split('/').pop()}`
}))
Will the title be set server-side for better SEO? Exemple: url : https:mywebsite.com/about title: MyWebsite・About
3 Replies
kapa.ai
kapa.ai•4d ago
Hi @DiamondSky660. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, using route.path with useHead is SSR-friendly in Nuxt 3. Your approach will work correctly for SEO purposes. The code you provided: 
const route = useRoute()

useHead(() => ({
  title: `MyWebsite・${route.path.split('/').pop()}`
}))
const route = useRoute()

useHead(() => ({
  title: `MyWebsite・${route.path.split('/').pop()}`
}))
This will indeed set the title server-side because: 1. The useRoute composable is fully supported in SSR context as documented in the Nuxt API. 2. The useHead composable supports reactivity and works during server-side rendering as explained in the SEO and Meta documentation. 3. Your example of transforming /about to "MyWebsite・About" will work as expected both on the server and client. For your specific example: - URL: https://mywebsite.com/about - Title: MyWebsite・About This title will be properly set during server-side rendering, which is beneficial for SEO as search engines will see the correct title when crawling your site. If you want to make your code even more performant, you could consider using the approach mentioned in the documentation for non-reactive meta tags: 
if (import.meta.server) {
  // These meta tags will only be added during server-side rendering
  useHead({
    title: `MyWebsite・${useRoute().path.split('/').pop()}`
  })
}
if (import.meta.server) {
  // These meta tags will only be added during server-side rendering
  useHead({
    title: `MyWebsite・${useRoute().path.split('/').pop()}`
  })
}
This optimization is suggested in the useSeoMeta documentation for cases where the meta doesn't need to be reactive after the initial render. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4d ago
<@503987809166557194> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
manniL
manniL•4d ago
yes

Did you find this page helpful?