How to generateMetadata without making two api calls.

[iambherulal]

In the dynamic route, we need to make two API calls: first to get the SEO data in the generateMetadata function and another in the component itself to get the page data.

Because it's a dynamic page, we cannot set a static title and description.

Previously, in the page router, there were components that we could use in the main component itself to generate the SEO data. However, this will not work in the App router.

I'm sure that other people are also facing the same issue.

If anyone knows the answer or has a solution for this, please share. I would be grateful.

[icyJoseph]

In Next 13 and 14, because fetch is cached, you are typically ok.

If not, you can still use cache from React, which is scoped to the ongoing request. So you'd be able to call a cache'd wrapped function, twice, but only once would you ever really invoke the work.

[iambherulal]

I'm using the axios for making the call and I tried the cache function but I didn't get satisfied it still making the two requests if possible please share a working example if you have one.

[icyJoseph]

🤔 I think maybe the problem is that cache has to be called inside a component:

• https://react.dev/reference/react/cache#memoized-function-still-runs

My bad there, cache won't do the trick then, even if the same arguments are passed.

I'd not be ideal to use unstable_cache from next.js, but maybe that's the only solution at this point? Besides, dropping axios? Why do you need axios exactly?

[PetrovaDaria]

Try creating a class that will have 1) a method for fetching data with cache, 2) cache-property. In method check the cache. If it's empty, then call axios and get data. Save the data in cache. Next call of this method will prevent network request. Works as react.cache but DIY and in more controlled way. It's just an assumption

[icyJoseph]

The problem is that, depending on the use case, you don't want to share this data between requests either.

And then that means you need to start to identify data per request, through some correlation id, and then also make sure you clean up, and avoid collisions, etc... then you might as well use unstable_cache from Next.js

[little077]

Avoiding using two requests may not seem reasonable in itself Our SEO for dynamic pages is also generated on the server based on a set of local rules to obtain merchant information. What you're saying is that SEO data and product data are separated. In my opinion, the best way is to merge them into one interface, which is more appropriate

[iambherulal]

The data is itself coming from one API endpoint, because the issue is there is no way to share the data between generateMetadata function and page component that's why I need to call the same api twice.

According to the next doc - https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function.

[markoleavy]

Have you tried using fetch instead of axios?

[vishalnimbalkar55]

I have the same issue, in past, I used NextJS 11 and at that point it was simple but now for SEO calling 2 API it doesn't feel write. It doesn't matter if we use fetch or Axios it should work the same as it used to in Next 11. i checked remix docs and they are doing the same thing. i guess i need to go for a library like React Helmet or something similar to resolve this issue.

[iambherulal]

Yes @vishalnimbalkar55 In the pages router there is a component from 'next/head' it's works great no need to call two APIs from one API call we can utilize the same data but this is not available in the app router.

[leerob]

Does this work for you?

https://nextjs.org/docs/app/building-your-application/caching#react-cache-function

[artem-wt]

It's a workaround solution that creates an issue of cache invalidation

[slavko-clubee]

Yes, exactly.
For example, a page has sections, we need to build meta description from section text, and build meta image data from image section. We have this data on server side component.
With current generateMetadata method, we need to duplicate the code, to access the same data, instead of passing it.

[behzad-ahmadi]

I have the same problem.
Why there isn't any way to prevent call the same api in both generateMetadata and server component?