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 ...

[ghost]

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?

[fomson]

Here: https://www.youtube.com/watch?v=VBlSe8tvg4U

Around the 16th minute seems like a solution.

[GrimLothar]

Thank you! This solved it for me using Supabase

Sucks that you still have to duplicate code between page and metadata, but at least no more dual calls

[Janki254]

I'm using Nextjs 15.

and I have same Issue of calling the API twice, one from generateMetadata() function and one from the page component function,
I also used cache() of React, I wrapped my function by cache, which fetching the API, but still facing the same issue.

const fetchBlogsDetails = cache(async (blog_id: string, sessionID?: any) => {
  const cookieString = sessionID
    ?.map((cookie: any) => `${cookie.name}=${cookie.value}`)
    .join("; ");

  console.log("🚀 ~ getBlogsDetails ~ blog_id1:", blog_id);
  let blogDetails = [];
  let blogTagsData = [];

  const response = await fetch(
    `${API_URL}blogDetails`,
    {
      method: "GET",
      headers: { P_BLOG_ID: blog_id, Cookie: cookieString }
    }
  );

  if (!response.ok) {
    throw new Error("Error while fetching blogs Data");
  }

  try {
    const res = await response.json();

    if (!res?.items || res.items.length === 0) {
      return null; // Blog not found
    }

    blogDetails = res?.items?.length > 0 ? res?.items[0] : null;
    blogTagsData =
      res?.items?.length > 0 ? res?.items[0]?.metatags?.split(",") : [];
    return { blogDetails, blogTagsData };
  } catch (err) {
    console.log(err);
    return null;
  }
});

export const generateMetadata = async (props: {
  params: Promise<{ blogId: string }>;
}) => {
  const params = await props.params;
  const fullUrl = `${appUrl}/blog/${params.blogId}`;

  const cookie = (await cookies()).getAll();
  const blogDetails = await fetchBlogsDetails(params.blogId, cookie);
  const blogDetails1 = await fetchBlogsDetails(params.blogId, cookie);
  console.log("🚀 ~ blogDetails1:", blogDetails1?.blogDetails?.title);

  return {
    title: blogDetails?.blogDetails?.metatitle,
      };
   };
   
const BlogDetailPage = async (props: {
  params: Promise<{ blogId: string }>;
}) => {
  const params = await props.params;
  const blog_id = params.blogId;
  // const fullUrl = `${appUrl}/blog/${params.blogId}`;

  // const cookie = (await cookies()).getAll();
  const blogDetails = await fetchBlogsDetails(params.blogId);

  if (!blogDetails) {
    notFound();
  }
    const loader = (
    <div className="min-vh-100 min-vw-100 d-flex justify-content-center align-items-center">
      <Loader />
    </div>
  );
  
    return (
    <>
     <Suspense fallback={loader}>
              <BlogDetails
                blogDetailsData={blogDetails?.blogDetails}
                blogTags={blogDetails?.blogTagsData}
              />
    </Suspense>
   </>
  );
};

export default BlogDetailPage;

Any solution for this?

[nanxiaobei]

type Fn<A, T> = (...args: A[]) => T;

// usage: const getMetrics = dedup(calculateMetrics);

export default function dedup<A, T>(fn: Fn<A, T>) {
  const resMap: Record<string, unknown> = {};

  return ((...args) => {
    const key = `${args}`;

    if (!(key in resMap)) {
      resMap[key] = fn(...args);
      setTimeout(() => delete resMap[key], 2000);
    }

    return resMap[key];
  }) as Fn<A, T>;
}

[vgaltes]

Commenting to stay tuned :)

[lotarbo]

Well based on the changes to nextjs in each version, we'll end up with the old classic template engine in php)
And yes I don't understand why it's done this way either, and why everything has to be solved via cache, it seems so illogical.

[hkmsadek]

Nextjs is simply getting worse day by day.. Instead of focusing performance and safety, they bring more new changes which makes no sense.

[DaBossCoda]

...

[RoyYangS]

Any solution for this? I think this should be a problem solved by the framework. Since it's handled on the server side anyway, why can't the data be shared? This makes data sharing even harder in a serverless environment.

[icyJoseph]

I noticed some interesting behavior, on Stackblitz, this root layout:

import './globals.css';
import type { Metadata } from 'next';

const getUUID = () =>
  fetch('https://httpbin.dev/uuid').then((res) => res.json());

export const generateMetadata: () => Promise<Metadata> = async () => {
  const { uuid } = await fetch('https://httpbin.dev/uuid').then((res) =>
    res.json()
  );
  return {
    title: `Title: ${uuid}`,
    description: 'Generated by create next app',
  };
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { uuid } = await fetch('https://httpbin.dev/uuid').then((res) =>
    res.json()
  );
  return (
    <html lang="en">
      <body>
        <h1>Layout: {uuid}</h1>
        {children}
      </body>
    </html>
  );
}

And this page.tsx:

export default async function Home() {
  const { uuid } = await fetch('https://httpbin.dev/uuid').then((res) =>
    res.json()
  );
  return <p>Page: {uuid}</p>;
}

never mind the coding style

Would generate, a different uuid for the title, but the layout and page, would use the same call, aka, same uuid would be displayed.

However, when running the same locally, on my machine, I get the same uuids 🤷 ~ This is the right behavior though! Curious to know your situation.

[thisisrick25]

@leerob @delbaoliveira @steven-tey

[icyJoseph]

Hi, do you have a repository or minimal reproduction setup showing this? I spend some time a couple of weeks ago,

• Reuse data fetched in page inside generateMetadata #50080 (reply in thread) (literally comment above)

And it was working fine, but surprisingly, in Stackblitz, it didn't.

[thisisrick25]

I used react-cache-function, which wasn't working initially when I tried, but works as expected now. Thanks.

Here's the repo https://github.com/thisisrick25/swapnaneel.me

[AntonBurduzha]

still requires solution, still getting duplicated request with cache/cache_unstable/cache_cool_whatever for just simple fetch

[icyJoseph]

That's unexpected though. Are you observing this in production?

fetch is first deduped, so that ought to prevent this, but even after that, you could cache explicitly force-cache.

Do you have a repo to look at? Like if you change a layout.tsx and page.tsx in a newly created project:

import './globals.css';
import type { Metadata } from 'next';

const getUUID = () =>
  fetch('https://httpbin.dev/uuid').then((res) => res.json());

export const generateMetadata: () => Promise<Metadata> = async () => {
  const { uuid } = await fetch('https://httpbin.dev/uuid').then((res) =>
    res.json()
  );
  return {
    title: `Title: ${uuid}`,
    description: 'Generated by create next app',
  };
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { uuid } = await fetch('https://httpbin.dev/uuid').then((res) =>
    res.json()
  );
  return (
    <html lang="en">
      <body>
        <h1>Layout: {uuid}</h1>
        {children}
      </body>
    </html>
  );
}

export default async function Home() {
  const { uuid } = await fetch('https://httpbin.dev/uuid').then((res) =>
    res.json()
  );
  return <p>Page: {uuid}</p>;
}

Then you'd see the same title, h1, and p tag value right?

[AntonBurduzha]

fetch is first deduped, so that ought to prevent this, but even after that, you could cache explicitly force-cache.

Hi, I want to thank you, because your comment pushed me to experiment with fetch config and update it for some api calls. It fully solved my issue. I was struggling half year.
I prevented double api call + added cache with react cache wrapper + passed force-cache + next revalidate. Somehow it haven't worked at all for me until now, I might use different versions of the Next or made a mistake.
Before this I used self-written utility kinda cache store with checking + prevention douplications functionality. Thanks again!