How to inject dynamic meta tags with Next-Seo
Got a bit confused with SSR. I'm using trpc, fetching some data with which I want to construct title, description meta tags. On some sites it looks ok (displaying title and description) on some I get undefined in the text of the tags. Assuming that the tags are generated before the trpc request finished.
I've also checked issues with ssr in trpc and it confused me. Long story short, what's the best way to dynamically set meta tags for [id].tsx like files?
2 Replies
hey maybe check next-seo i think it should work with your use case https://github.com/garmeeh/next-seo
GitHub
GitHub - garmeeh/next-seo: Next SEO is a plug in that makes managin...
Next SEO is a plug in that makes managing your SEO easier in Next.js projects. - GitHub - garmeeh/next-seo: Next SEO is a plug in that makes managing your SEO easier in Next.js projects.
You can use server-side helper instead of
ssr:true just as it's mentioned on the docs https://trpc.io/docs/nextjs/ssr
Pre-fetch your data and then just add to your <Head> component.
Follow these:
https://trpc.io/docs/nextjs/server-side-helpers
https://nextjs.org/docs/api-reference/next/headServer-Side Rendering | tRPC
To enable SSR just set ssr: true in your createTRPCNext config callback.
Server-Side Helpers | tRPC
createServerSideHelpers provides you with a set of helper functions that you can use to prefetch queries on the server. This is useful for SSG, but also for SSR if you opt not to use ssr: true.
next/head | Next.js
Add custom elements to the
head of your page with the built-in Head component.