Where do you dedupe/cache calls shared between layout.tsx and page.tsx?

[codinginflow]

When you fetch the same data in a page.tsx and it's generateMetadata, it's good to deduplicate it using React's cache function so you don't fetch the data twice:

const getCollectionCached = cache(getCollection);

export async function generateMetadata({
  params: { slug },
}: PageProps): Promise<Metadata> {
  const collection = await getCollectionCached(slug);

  return {
    title: ,
   ...
  };
}

export default async function Page({
  params: { slug },
}: PageProps) {
  const collection = await getCollectionCached(slug);

  return (
    <div className="space-y-5">
      ...
    </div>
  );
}collection.name

My question:

Say you need this value also in the shared layout.tsx of that folder, where do you put getCollectionCached?

This is only a question about folder structure.

[bmamouri]

@codinginflow, I am wondering how do you even access page params in layout.tsx?