Reuse data fetched in page inside generateMetadata

[virendrapatel62]

I have fetched data in the page server component. How can I use the same data in the generateMetadata function without fetching it again?

[guigosgui]

I have a same question :D Waiting...

[sev3e3e]

You can use the cache .

import { cache } from "react";

export const getPost = cache(() => {
    console.log("called getPost()");
    return "post";
});

import { Metadata } from "next";

export function generateMetadata(): Metadata {
    const posts = getPost();

    return {
        title: "title",
    };
}

const Page = async () => {
    const posts = getPost();

    return <article>{"article"}</article>;
};

export default Page;

"called getPost()" is output only once.

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

[Mohamed3on]

I just tried this out, I'm still getting 2 logs, so it doesn't seem like it's actually deduping the function.

[Cha195]

@Mohamed3on it should work if your function parameters don’t contain objects. Can you share the function definition?

[Mohamed3on]

@Cha195

async function getProductDetails(product_id: string) {
  // logs twice
  console.log('Fetching...')
  const supabase = createClient();

  const { data, error } = await supabase
    .from('product')
    .select()
    .eq('id', product_id)
    .single();


  return data;
}

No objects here, just an ID.

[zoolyka]

@Mohamed3on Have you placed it inside react's cache function? The snippet you prodived should log twice.

[Mohamed3on]

yep, after wrapping it with react cache, it still logs twice! @zoolyka

[codinginflow]

Fetch is deduplicated automatically, so you don't need to use cache. If you use something else (like Axios or I guess Prisma too), you have to use cache.

There is no way to share the data between the server component and generateMetadata directly.

[Mykybo]

why is this common use case not in documentation

[zoolyka]

Note that React cache won't help anything when using async functions for data retrieval, since the generateMetadata and Page functions are executed at the same time (so both will start do the same async thing and not "wait" for each other, causing duplicate data retrieval).

Is there any known solution to share async loaded data between the page and metadata, or set the metadata inside the page function?

[codinginflow]

What, really? I thought cache was exactly the right thing to use in generateMetadata.

[hamilton-seguin]

Would it work if the data that is called twice is called from generateMetadata and then not in the Page directly, but inside a component called by that page (renderer on the client side)?

[Cha195]

@zoolyka for async functions, doesn't cache return the same promise (generated by the first call) for the second cacheFn call? Below is the doc for the same
https://react.dev/reference/react/cache#caching-asynchronous-work

[zoolyka]

@Cha195 You are right.

I've made some additional tests and cache indeed works when the cached function's arguments are not mutated in any way. It will be called from separate functions, so it could be tricky to pass the same arguments for both calls.

For example the following will not be cached (the requestFunction will run twice):

async function requestFunction ({ username }) { await... }

const cachedRequestFunction = cache(requestFunction);

export async function generateMetadata ({ params }) {
  const result = await cachedRequestFunction({ username: 'test' });
}

export default async function Page ({ params }) {
  const result = await cachedRequestFunction({ username: 'test' });
}

Since the arguments are newly created objects and react's shallow equality check will tell them apart.

[Cha195]

Ah yes, good point. It is an issue when the params are objects.

[fomson]

Still not clear why data cannot be reused or passed between the page component and its generateMetadata ...

[lyfmantle]

very anti-react

[Abhid14]

Even I am facing the same problem. Data fetch twice on every request is going to cost us twice. There should be some way to mitigate this issue.

[buarki]

Commenting to stay tuned :)

[Mohamed3on]

Following because cache doesn't work in this case, and also supabase doesn't offer deduplication, so every supabase request is duplicated for both metadata and the page itself. It's very annoying.

[cvoege]

I'm really not getting these "just use cache bro, nextJS fetch does it for you" responses... Do people think that the only form of async data retrieval in existence on the entire planet is via fetch with simple GET routes? Also, some things just shouldn't be cached.

Can we just admit that caching isn't a valid solution for all use cases, and this is inevitably going to be a common workflow, so can we just agree that a better solution should be implemented by next here?

[kbsali]

interested in getting an answer to this too

[rhkdgns95]

I am using nextjs15.

Is it possible to reuse the data retrieved by calling API in generateMetadata() in the same way in page.tsx?