nodejs.org icon indicating copy to clipboard operation
nodejs.org copied to clipboard

[Next.js] Move away from `top-level` await/React's `cache()` for `next-data` in favour of `'use cache'` from Next.js

Open ovflowd opened this issue 3 months ago • 1 comments

Right now our top-level await's are evaluated for each individual route they serve + each individual parallel worker during the build process. This greatly increases the amount of foreign requests done and data fetched/built by our next-data generators.

As Next.js 15 recently introduced 'use cache' directive, this solves these two problems potentially drastically reducing build time, amount of requests we sent during build and reduce memory pressure.

We can easily adopt this by:

  • Providers should stop exporting cache() calls with top-level constants and transform these into asynchronous functions
  • These imports should then be done directly inside React components and pages/routes. (App Router)

Notes

  • Requires an import and then call of await within the component (The component needs to become an async component if it isn't already)
  • Only supported by server-components (since this is calculated by the server anyways)
  • If any of this data is used by a client component, move the data to become props for that client-component to remove the need of this data to actually be passed down from server->client.
  • Docs: https://nextjs.org/docs/app/api-reference/directives/use-cache

ovflowd avatar Oct 06 '25 17:10 ovflowd

cc @nodejs/web-infra / @nodejs/nodejs-website if anyone wants to tackle this. Would be a quite fun task :)

ovflowd avatar Oct 06 '25 17:10 ovflowd