Next.js Discord

Discord Forum

How would you optimize this Next.js 16 Cache Components setup for highly dynamic pages?

Unanswered
Ariegeois posted this in #help-forum
Open in Discord
AriegeoisOP
We're looking for advice on whether our Next.js 16 architecture is aligned with Cache Components best practices and where the biggest performance wins might be.

Current setup

Next.js 16.2.12
App Router
cacheComponents: true
reactCompiler: true
No "use cache" for transactional reads (intentional to avoid stale-after-write issues)
Primary data is fetched via uncached Drizzle queries
TanStack Query is only used for secondary, non-blocking data after first paint

Our detail pages follow:

Page
└── <Suspense fallback={<Loading />}>
└── async DetailComponent

The skeleton appears instantly, but the content streams in after ~100–400ms.

The critical path is roughly:

getSession()
getFreshAccountStatus() (2 uncached DB queries)
getPropertyById() (uncached query + access resolution + signed URLs)

One page (projects/[id]) also currently calls await connection(), making the segment fully dynamic.

From our understanding, staleTimes only affects the client router cache and not this initial render.

Question: Given that we prioritize fresh authorization and transactional consistency over caching, what would you recommend to improve perceived performance? Should we focus on reducing DB round trips, restructuring Suspense boundaries, request-level deduplication, selectively caching certain reads, or something else?

1 Reply

AriegeoisOP
is cached components actually the best play here? we have a dashboard setup currently with a lot of different routes etc.