Route Segment Config
Export config constants like dynamic and revalidate to control how a whole route renders.
Syntax
export const dynamic = 'force-dynamic';You can override rendering behavior for an entire route by exporting route segment config constants from its page.tsx or layout.tsx. The most common ones:
export const dynamic = 'force-dynamic'— always render on each request.export const dynamic = 'force-static'— force static rendering.export const revalidate = 60— ISR window in seconds.export const fetchCache,runtime, and more.
Example
// app/feed/page.tsx — force this route to render on every request
export const dynamic = 'force-dynamic';
export default async function Feed() {
const items = await getLiveFeed();
return items.map((i) => <p key={i.id}>{i.text}</p>);
}When to use it
- A developer exports dynamic = 'force-dynamic' on a dashboard page to guarantee it never serves a stale cached version.
- A static page is forced with dynamic = 'force-static' even though it calls an API, by caching the fetch upstream.
- A route exports revalidate = 3600 so the whole page acts as ISR without per-fetch revalidate options.
More examples
Force dynamic for a route
force-dynamic guarantees the page runs as SSR on every request, ignoring any static cache.
// app/profile/page.tsx
export const dynamic = 'force-dynamic';
export default async function ProfilePage() {
const session = await getSession(); // reads cookies
return <p>Welcome, {session.user.name}</p>;
}Segment-level revalidate
Exporting revalidate applies ISR timing to the entire route without adding next.revalidate to every fetch.
// app/news/page.tsx
export const revalidate = 3600; // seconds — behaves as ISR
export default async function NewsPage() {
const articles = await fetchArticles();
return <ul>{articles.map((a: any) => <li key={a.id}>{a.headline}</li>)}</ul>;
}Prefer static despite cookies
force-static pre-renders the page at build time regardless of whether the component would otherwise trigger dynamic rendering.
// app/public-profile/[id]/page.tsx
export const dynamic = 'force-static';
export default async function PublicProfile({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
const profile = await getPublicProfile(id);
return <h1>{profile.displayName}</h1>;
}
Discussion