Frequently changing data
A dashboard must show data that changes between requests.
Next.js 16+ · Const
dynamic
export const dynamic = 'force-dynamic' opts an App Router route into request-time rendering. Use it when the route must reflect current or personalized data.
How it works
The dynamic segment configuration lets an App Router route explicitly select dynamic rendering. Setting it to force-dynamic makes the route render on every request instead of being prerendered, which is useful when its output must reflect request-time or frequently changing data.
Syntax
export const dynamic = 'force-dynamic'Key points
- Declare
dynamicat the route segment level and set it toforce-dynamicto require dynamic rendering. - Dynamic rendering produces the server output when each request arrives, rather than only during a build.
- Use it for pages whose data must stay current instead of relying only on a prerendered result.
- Static and dynamic work can be scoped within a page; the entire page need not share one rendering mode.
- A response can send stable UI first and deliver request-time sections as they become available.
Common mistakes
- A dynamic route does not mean every operation must be uncached; cached work can still be used within it.
Example: Force request-time rendering
export const dynamic = 'force-dynamic'
export default async function Page() {
const res = await fetch('https://api.example.com/products', {
cache: 'no-store',
})
const products = await res.json()
return <pre>{JSON.stringify(products, null, 2)}</pre>
}This page opts into request-time rendering and fetches fresh data for each request.
When to use it
Request-specific output
A response depends on cookies, headers, or URL search parameters.
Mixed static and dynamic UI
A page combines a stable shell with sections that resolve from live sources.
Interview questions
QWhat does export const dynamic = 'force-dynamic' do?
force-dynamic explicitly opts a route into rendering at request time. This is appropriate when the response depends on current or personalized data rather than a build-time result.
Follow-up: Can a dynamic route contain cached work? Yes. Dynamic and cached behavior can coexist at the component or operation level.
QWhen should a route use dynamic rendering?
Dynamic rendering generates content on the server for each user when the page is requested. It suits data that changes frequently or depends on information available only at request time.
Follow-up: What is the performance trade-off? The route can be limited by its slowest data fetch, so independent sections should be structured to stream where appropriate.
QCan static and dynamic content coexist in the App Router?
Next.js can combine static and dynamic content within one response. A page may have a static shell while dynamic sections resolve and stream separately.
Follow-up: Why avoid making an entire route dynamic unnecessarily? Keeping static portions static can improve initial delivery while isolating request-time work to the components that need it.
Related
Dynamic RenderingRoute HandlerscookiesheaderssearchParamsfetchSuspense