Same query in generateMetadata and the page
Why it matters
fetch is deduped per request, but other data calls are not: generateMetadata and the page each run the query, doubling the database work.
Fix
Wrap the loader in React cache() (export const getPost = cache(async (slug) => …)) and call it from both.
Credit
From the React team
React's cache function memoizes a function's result for the duration of a request.
From the Next.js team
generateMetadata and the page can share data when it is fetched through a deduplicated or cached function.
References
- cacheReact
- generateMetadataNext.js
- Fetching DataNext.js