Fetching data in next js layout to reduce api calls

I have a next.js pages router that has subroutes for example:

/pages/products/index.tsx
/pages/products/product1.tsx
/pages/products/product2.tsx

I have an app level layout, but I also need a route level layout that relys on data fethced from datocms, if Ill just query datocms endpoint every page render will that hit the cache? or this is not performent and ill better find a way to query the endpoint once through a layout page and render all the rest as it children?

if the latter, could you help me doing so?

Hey @infrastructure, and welcome to the forums!

We generally recommend building your site statically (using getStaticProps) so you’re not rendering on every page load, just when you build the project. You can also set up incremental static regeneration to have individual pages rebuilt when their content changes, by invalidating them after some time period). That way only your backend talks to our API directly, instead of each visitor hitting our API for every page load.

If you’re also using the App Router, you can look into Next’s built-in fetch caching, which should cache fetches from our API (but be sure to specify a revalidation so you don’t get stale data): Building Your Application: Caching | Next.js