❓ Best Practices for Optimizing Next.js App with Decoupled Backend/API

[argcast]

Summary

Hey everyone!
I'm working on a Next.js app where the backend is completely decoupled and acts as an external API (not part of the same monorepo or runtime). This external API is responsible for querying the database and returning results, often after processing/filtering the data.

As my app grows, I'm noticing increasing response times, especially on pages or routes that require too much suspense time and multiple API calls to get different pieces of data.

I'd love to get input on:

• General architectural principles to keep in mind when your data source is a remote API
• How to reduce API call latency in Next.js (e.g. caching strategies, request batching, etc.)
• Whether or not server actions or React Server Components help in this scenario

Any tips, resources, or personal experiences would be super helpful

Additional information

No response

Example

No response

[argcast]

Also any useful patterns or libraries to help streamline external data fetching in a maintainable way are welcome