Request memoization vs. Query optimization

Answered

Kerry Blue Terrier posted this in #help-forum

Kerry Blue TerrierOP

2024-01-17T15:03:32.000Z

Hello NextJs community!

Looking at the doc and specifically this part https://nextjs.org/docs/app/building-your-application/caching#request-memoization about Request memoization, I understand that if I make several requests on the same page (ex: one for generateMetadata, and the other for my actual data fetching to display on page), it will get memoized and not happen twice.

However I tended to do something different where I would have my complete query for data and a specific, lighter seoQuery for generateMetadata purposes. If I get it right, with this approach, I'm essentially opting out of the request memoization feature since it's not the exact same query.

What's the most performant way to tackle this in your opinion?

Answered by Ray

could you use the same query for Project and generateMetadata?
if so, you could do this

import {cache} from 'react'

const getProject = cache(async (slug) => client.fetch(query, { slug }))

export async function generateMetadata({params}) {
  const project = await getProject(params.slug)
}

export default async function Project({params}) {
  const project = await getProject(param.slug)
}

View full answer

3 Replies

@Kerry Blue Terrier Hello NextJs community! Looking at the doc and specifically this part https://nextjs.org/docs/app/building-your-application/caching#request-memoization about Request memoization, I understand that if I make several requests on the same page (ex: one for `generateMetadata`, and the other for my actual data fetching to display on page), it will get memoized and not happen twice. However I tended to do something different where I would have my complete `query` for data and a specific, lighter `seoQuery` for `generateMetadata` purposes. If I get it right, with this approach, I'm essentially opting out of the request memoization feature since it's not the exact same query. What's the most performant way to tackle this in your opinion?

Ray

2024-01-17T15:10:44.000Z

could you use the same query for Project and generateMetadata?
if so, you could do this

import {cache} from 'react'

const getProject = cache(async (slug) => client.fetch(query, { slug }))

export async function generateMetadata({params}) {
  const project = await getProject(params.slug)
}

export default async function Project({params}) {
  const project = await getProject(param.slug)
}

Answer

Ray

2024-01-17T15:11:33.000Z

I think the query for the project should contain all the thing for metadata?

@Ray could you use the same query for `Project` and `generateMetadata`? if so, you could do this ts import {cache} from 'react' const getProject = cache(async (slug) => client.fetch(query, { slug })) export async function generateMetadata({params}) { const project = await getProject(params.slug) } export default async function Project({params}) { const project = await getProject(param.slug) }

Kerry Blue TerrierOP

2024-01-17T15:41:06.000Z

Hey Ray, Thanks for the answer. Yes I think that's probably the way to go ðŸ™‚