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

[reposhareio]

Summary

reposhare its a product built using 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]

When dealing with a decoupled backend via external APIs, focus on:

• Caching at the edge (e.g. Next.js middleware, CDN, or API gateway)
• Reducing round-trips with request batching or aggregating endpoints
• Using fetch in React Server Components to take advantage of automatic deduping
• Memoizing API responses server-side with tools like SWR cache or in-memory stores
• Avoiding over-fetching by scoping API calls to only what’s needed per route
• Also consider measuring slow queries in the backend itself—latency may be coming from database inefficiencies.