Hreflang in React, Vue and Next: where server rendering saves you

Hreflang in React, Vue and Next: where server rendering saves you

If your hreflang tags are injected by JavaScript after the page loads, you are betting on Google's second rendering pass. That pass does happen, but it is delayed, rate-limited and sometimes skipped for low-priority URLs. Large international sites end up with half their clusters unverified.

What goes wrong in single-page apps:

— The head component renders hreflang for the route the user first opened, then client-side navigation changes the URL without updating the tags
— The link elements are added by a hook that fires after hydration, so the raw HTML has none
— Alternates are built from the current window location, which includes query strings and hash fragments

The fix is to generate hreflang on the server. In Next.js that means the metadata API or getServerSideProps, in Nuxt the useHead composable during SSR, in plain frameworks a pre-rendering step. Verify by fetching the page with curl and grepping for rel="alternate". If it is not in the raw response, it is not reliable.

Bonus: the sitemap can carry hreflang independently of the HTML, and for JS-heavy sites it is often the safer channel.