6

Consider the following server side component that's part of some page (page.js) in the app directory, representing a person:

export default async function Person({ params }) {
    const person = await getPerson(params.id);
    
    return (
        <h1> {person.name} </h1>
        <p> {person.bio} </p>
    )
}

Obviously, the intent here is to dynamically render new pages, with the idea being that the URL looks something like /person/{id}, where ID is the unique ID of each person.

The issue I'm running into is that I need to set metadata for the page. For example, I want the title to be person.name, and the description to be person.description. From what I'm reading, the only way to do that in NextJS 13 with the app directory is to use generateMetadata, which would look something like this:

export async function generateMetadata({ params }) {
    const person = await getPerson(params.id);

    return {
        title: person.name,
        description: person.description
    }
}

I'm sure you can see the issue now: I need to make the exact same request (getPerson) twice in the same page. From what I've seen, there isn't a way to pass data between generateMetadata and the page component.

The <Head> component from next/head seems like the ideal solution, but it doesn't appear to work in the app directory with NextJS 13.

Am I missing something really obvious here? Or is this an absolutely massive oversight by Next's devs?

Krusty the Clown
  • 517
  • 6
  • 24
Twisted Tea
  • 49
  • 11

1 Answers1

9

If the function you're calling is internally calling fetch it is automatically deduplicated by Next.js as can be read in the official documentation here.

Should you be directly calling a database or using a fetch alternative (like axios) as explained you can use Reacts new cache() function to deduplicate calls to logic that does not automatically get deduped by Next.js. More can be found in the official documentation here

import { cache } from 'react'
 
export const getPerson = cache(async () => {
   // your logic ...
});

Although the getPerson() function is called twice, inside the page and metadata generator, only one call will be made. This is because the function is wrapped in cache(), so the second request can reuse the result from the first request.

Fabio Nettis
  • 1,150
  • 6
  • 18
  • interesting, thanks so much. I should’ve specified, but I am using `fetch` underneath `getPerson` – Twisted Tea Jun 27 '23 at 15:55
  • 1
    looks like I spoke too soon - when testing with my backend, Next is in fact making duplicate requests when using `fetch` underneath `getPerson` (which turns into a single request when `generateMetadata` is removed). Haven't tested it in production, so it may just be an issue in the development server. Going to give `cache` a try... – Twisted Tea Jul 29 '23 at 03:55