SEO for dynamic routes that display client components that depend on big data
Unanswered
Alligator mississippiensis posted this in #help-forum
Alligator mississippiensisOP
I'm working on a project that involves using charts/tables to display big data (~10mb on average). I have a dynamic route setup that uses the route name as parameters for a query that retrieves the data. For example, the route "example.com/barack-obama" would retrieve data for Barack Obama and display it as a chart/table (depending on some other parameters). I want to do some SEO stuff so that the dynamic route will come up in the search results for "Barack Obama" (or some other query). I'm unsure of how to do the SEO since I have hundreds of thousands of pages, each with unique data (again, ~10mb on average). Additionally, this data is updating on a daily to weekly basis.
I welcome any and all input/suggestions.
I welcome any and all input/suggestions.
23 Replies
Maybe weird, but considering the 10MB per request... What about spinning an endpoint/function exclusively that returns only the necesessary data to fill the metadata tags instead of ALL the data?
If you request the page dynamically the generateMetadata({params}) will get the data quick, as for the page this will take a little longer but simply add a
loading.tsx so you're not blocked.you can use
generateMetadata for metatags. If you want to tell crawlers about these pages, use sitemap@LuisLl Maybe weird, but considering the 10MB per request... What about spinning an endpoint/function exclusively that returns only the necesessary data to fill the metadata tags instead of ALL the data?
Alligator mississippiensisOP
I was thinking about something like this. I need to setup a DAG on my backend that runs whenever data gets updated so that the calculated metadata gets updated also.
@LuisLl If you request the page *dynamically* the generateMetadata({params}) will get the data quick, as for the page this will take a little longer but simply add a `loading.tsx` so you're not blocked.
Alligator mississippiensisOP
If possible, I want to do something like: have a "base" page that is pre-rendered with SSR, dynamically request the metadata for this page on each request, make a request to get the full data on the client (i.e. while the metadata is being generated on the server, the client is making a concurrent request to get the full data).
Actually Next.js 15.2 just came up and with it you can have metadata streaming that will come in as the page renders, but might not be ideal for SEO first
@Yi Lon Ma you can use `generateMetadata` for metatags. If you want to tell crawlers about these pages, use sitemap
Alligator mississippiensisOP
My backend (FastAPI) has a route that returns an array of slugs to use for the dynamic route. A sitemap is generated from this array. Is it important for the pages to also have metadata to be indexed properly?
I have no idea about that
@LuisLl Actually Next.js 15.2 just came up and with it you can have metadata streaming that will come in as the page renders, but might not be ideal for SEO first
Alligator mississippiensisOP
I saw that announcement. I'm also not sure whether that will impact SEO much since it will go sync instead of crawlers
Yea maybe not the best approach.. just brainstorming possibilities
Alligator mississippiensisOP
Right now I make 2 requests for the data: one in generateMetadata and one in the page component. With the current configuration, these are making a request to the exact same endpoint and getting the exact same data. Is it possible to combine this into a single request and have the generateMetadata function and the page component access some shared memory?
Yes wrap the function is react.cache
You will only hit the data source once the second time will hit the cache, this cache lives per request
So, it won’t persist, the next request will make the call again (just once), even if it’s for the same page.
Alligator mississippiensisOP
Which function?
const cacheFn = cache(callbackToCache)
The function you’re calling in generateMetadata() and again inside the page component
@LuisLl The function you’re calling in generateMetadata() and again inside the page component
Alligator mississippiensisOP
Ah. Right now I’m just doing fetch(…) inside generateMetadata and the page component. I should make a function that makes the fetch request and call it in both?
Then yes, like this:
const cacheFn = cache((param) => {
const resp = await fetch(…);
// the rest…
})Alligator mississippiensisOP
Ah ok. Thank you
@Alligator mississippiensis solved?
@LuisLl <@393945847504830466> solved?
Alligator mississippiensisOP
I’m still working on the SEO stuff but the caching is working yes
I opened another thread if you wouldn’t mind taking a look https://nextjs-forum.com/post/1345150975639552000