Rendering strategy matches content type (static pages use SSG, dynamic use SSR/ISR)

A static marketing page with export const dynamic = 'force-dynamic' re-renders on every request — wasting server compute on content that hasn't changed, adding 100–500ms of server processing time compared to serving a cached HTML file, and forcing the CDN to bypass its edge cache entirely. Conversely, a personalized dashboard statically generated at build time serves stale data that doesn't reflect the current user's state. Mismatched rendering strategies cause either unnecessary cost (static content served dynamically) or incorrect behavior (dynamic content served statically). ISO 25010 performance-efficiency.time-behaviour requires that system response time reflect the minimum work necessary.

Audit every route's rendering directive and align it with whether the content is static or user-specific. In Next.js App Router, pages are static by default — only add force-dynamic or cache: 'no-store' when the page genuinely requires fresh data per request.

// app/page.tsx — marketing homepage: static by default, no config needed
export default function HomePage() {
  return <MarketingContent />
}

// app/dashboard/page.tsx — user-specific: needs dynamic
export const dynamic = 'force-dynamic'
export default async function Dashboard() {
  const user = await getAuthenticatedUser()
  return <DashboardView user={user} />
}

// app/blog/[slug]/page.tsx — blog post: ISR (cached, revalidated every 60s)
export const revalidate = 60
export default async function BlogPost({ params }) {
  const post = await fetchPost(params.slug)
  return <PostView post={post} />
}

For Pages Router, use getStaticProps for blog/marketing and getServerSideProps only for pages needing per-request user data.

• ID: performance-load.rendering.appropriate-rendering

• Severity: high

• What to look for: Before evaluating, extract and quote the rendering-related directives from each page file: export const dynamic, export const revalidate, 'use client', getStaticProps, getServerSideProps, or equivalent. Check each route/page for its rendering strategy. Static pages should use Static Site Generation (SSG) or static exports. Dynamic pages should use Server-Side Rendering (SSR) or Incremental Static Regeneration (ISR). Detect the router type before evaluating — detection patterns differ significantly between App Router and Pages Router. For Next.js App Router (detected by presence of app/ directory): All pages are statically rendered by default. Check for appropriate use of export const dynamic = 'force-dynamic' or cache: 'no-store' on pages that actually need dynamic data. The presence of 'use client' does NOT make a page dynamically rendered — it only means client-side hydration. For Pages Router (detected by presence of pages/ directory): Check for getStaticProps (SSG), getServerSideProps (SSR), and getStaticPaths (dynamic SSG). Do not look for Pages Router patterns (getStaticProps, getServerSideProps) in App Router projects, and vice versa. For non-Next.js frameworks: Check the framework's equivalent rendering control mechanisms (e.g., SvelteKit's export const prerender, Nuxt's useFetch vs. useAsyncData).

• Pass criteria: At least 80% of static content pages (marketing, blog, pricing, docs) use SSG or are statically rendered by default. At least 80% of dynamic personalized content uses SSR, ISR, or appropriate client fetching. No more than 1 page uses a mismatched rendering strategy. Report: "X of Y pages use an appropriate rendering strategy for their content type."

• Do NOT pass when: A static marketing page explicitly sets force-dynamic or cache: 'no-store' — even if the page "works," re-rendering unchanging content on every request is a mismatched strategy.

• Fail criteria: 2 or more static marketing pages use force-dynamic / cache: 'no-store' / getServerSideProps (re-rendering on every request when content never changes). Or dynamic personalized content is incorrectly statically generated.

• Skip (N/A) when: Framework does not support multiple rendering strategies (e.g., plain Create React App, pure Express API, or static-only site generators).

• Detail on fail: "3 of 8 pages use mismatched rendering — homepage, pricing, and about all use force-dynamic but have no dynamic content" or "0 of 6 routes use SSG — all routes are CSR-only with useEffect data fetching"

• Remediation: Choose the right rendering strategy:

  // Next.js 15 (App Router) — static by default
  // app/page.tsx — SSG (static)
  export default function HomePage() { return <Home /> }
  
  // Dynamic data — SSR
  export const dynamic = 'force-dynamic'
  export default async function DashboardPage() {
    const data = await fetch('https://api.example.com/data', { cache: 'no-store' })
    return <Dashboard data={data} />
  }
  
  // Revalidate every 60s — ISR
  export const revalidate = 60
  export default async function BlogPost() {
    const post = await fetch(`https://api.example.com/post/${id}`, { cache: 'force-cache' })
    return <Post data={post} />
  }