How can we control dynamic rendering behaviour in next js?

Question

Accepted Answer

Next.js provides multiple ways to control rendering behavior, ranging from coarse-grained route-level configuration to fine-grained per-fetch control. The primary mechanism is the `dynamic` route segment config exported from `layout.tsx`, `page.tsx`, or `route.ts` files, which allows you to override the default rendering strategy for that segment [citation:2][citation:4]. // app/page.tsx or app/layout.tsx // 'auto' (default) - Cache what can be cached, allow dynamic APIs export const dynamic = 'auto' // 'force-dynamic' - Force dynamic rendering for every request export const dynamic = 'force-dynamic' // 'error' - Force static rendering, error if dynamic APIs are used export const dynamic = 'error' // 'force-static' - Force static rendering, empty values for dynamic APIs export const dynamic = 'force-static' The `dynamic` configuration offers four distinct modes. `'auto'` (the default) caches as much as possible while still allowing components to opt into dynamic behavior. `'force-dynamic'` forces dynamic rendering for each request, equivalent to setting `{ cache: 'no-store' }` on all fetches and is useful for user-specific dashboards or real-time data [citation:2][citation:9]. `'error'` enforces static rendering and throws an error if any dynamic APIs are used, helping maintain static builds. `'force-static'` also forces static rendering but makes dynamic APIs return empty values, useful for pages that should be static but are impacted by dynamic functions like `cookies()` [citation:2][citation:7]. // Force dynamic rendering for a dashboard // app/dashboard/page.tsx export const dynamic = 'force-dynamic' export default async function Dashboard() { const data = await fetch('https://api.example.com/dashboard-data').then(r => r.json()) return

{/* dashboard content */}

} // Automatic dynamic detection using dynamic APIs // app/profile/page.tsx import { cookies } from 'next/headers' export default async function Profile() { // Using cookies() automatically opts the page into dynamic rendering const userId = (await cookies()).get('userId')?.value const user = await fetch(`https://api.example.com/users/${userId}`).then(r => r.json()) return

Welcome, {user.name}

} // Force static rendering with empty dynamic API values // app/static-page/page.tsx export const dynamic = 'force-static' export default async function StaticPage() { // cookies() returns empty values, fetch is cached const theme = (await cookies()).get('theme')?.value // undefined const data = await fetch('https://api.example.com/data').then(r => r.json()) return

{data.content}

} For dynamic routes, the `dynamicParams` configuration controls what happens when a visitor requests a path not generated by `generateStaticParams`. When `true` (default), Next.js generates the page on-demand (streaming server rendering). When `false`, non-generated paths return a 404. This replaces the `fallback` option from the Pages Router [citation:2][citation:7]. // app/blog/[slug]/page.tsx // Generate popular blog posts at build time export async function generateStaticParams() { const posts = await getPopularPosts() return posts.map(post => ({ slug: post.slug })) } // Allow on-demand generation for other slugs (default) export const dynamicParams = true // OR: Return 404 for non-pre-rendered slugs export const dynamicParams = false Rather than forcing entire routes to be static or dynamic, Next.js recommends granular caching at the `fetch` request level. You can control individual data fetches using the `cache` and `next.revalidate` options, allowing static and dynamic content to coexist within the same page [citation:5]. // Force static cache (default) const data = await fetch('https://api.example.com/data', { cache: 'force-cache' }) // Force dynamic, no cache const liveData = await fetch('https://api.example.com/live', { cache: 'no-store' }) // ISR with revalidation const posts = await fetch('https://api.example.com/posts', { next: { revalidate: 60 } }) Next.js automatically opts pages into dynamic rendering when they use dynamic functions like `cookies()`, `headers()`, or `searchParams`, or when they contain uncached fetches. This automatic detection allows you to rely on the default `'auto'` setting while letting the framework make intelligent rendering decisions based on your code [citation:9][citation:10]. **Use `'auto'` as default**: Let Next.js automatically determine the optimal rendering strategy based on your data fetching patterns. **Prefer granular fetch caching**: Use `cache: 'force-cache'` for static data, `cache: 'no-store'` for dynamic data, and `next.revalidate` for ISR. **Use `dynamic: 'force-dynamic'` for user-specific pages**: Dashboards, profile pages, and real-time data that change per request. **Use `dynamic: 'error'` to enforce static builds**: Ensure pages remain static and fail the build if dynamic APIs are accidentally introduced. **Avoid overusing `force-dynamic`**: The Next.

How can we control dynamic rendering behaviour in next js?

Control dynamic rendering in Next.js using the `dynamic` route segment config (`'auto'`, `'force-dynamic'`, `'error'`, `'force-static'`), `dynamicParams`, and granular `fetch` caching options, shifting from page-level decisions to component-level control [citation:2][citation:5].

How can we control dynamic rendering behaviour in next js?

Control dynamic rendering in Next.js using the `dynamic` route segment config (`'auto'`, `'force-dynamic'`, `'error'`, `'force-static'`), `dynamicParams`, and granular `fetch` caching options, shifting from page-level decisions to component-level control [citation:2][citation:5].

Scenario Questions

Follow-up Questions

How can we control dynamic rendering behaviour in next js?

Control dynamic rendering in Next.js using the dynamic route segment config ('auto', 'force-dynamic', 'error', 'force-static'), dynamicParams, and granular fetch caching options, shifting from page-level decisions to component-level control [citation:2][citation:5].

How can we control dynamic rendering behaviour in next js?

Control dynamic rendering in Next.js using the dynamic route segment config ('auto', 'force-dynamic', 'error', 'force-static'), dynamicParams, and granular fetch caching options, shifting from page-level decisions to component-level control [citation:2][citation:5].

Scenario Questions

Follow-up Questions

Control dynamic rendering in Next.js using the `dynamic` route segment config (`'auto'`, `'force-dynamic'`, `'error'`, `'force-static'`), `dynamicParams`, and granular `fetch` caching options, shifting from page-level decisions to component-level control [citation:2][citation:5].

Control dynamic rendering in Next.js using the `dynamic` route segment config (`'auto'`, `'force-dynamic'`, `'error'`, `'force-static'`), `dynamicParams`, and granular `fetch` caching options, shifting from page-level decisions to component-level control [citation:2][citation:5].