Skip to content

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

@ovflowd

Description

@ovflowd

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    📋 Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions