What is the difference between Static and Dynamic rendering in Next.js App Router?

Next.js App Router automatically determines whether to render a route statically or dynamically: Static rendering (default): routes are rendered at build time and cached. The result is shared among all users. No per-request work. Served from CDN edge. Routes are static when: no dynamic functions are used (cookies(), headers(), searchParams), all fetch() calls are cached (force-cache or revalidate). Dynamic rendering (per-request): routes are rendered on the server for each request. Enables user-specific data, real-time data. Routes become dynamic when: cookies() is called anywhere in the route (implies request-specific data); headers() is called; searchParams is accessed in page.tsx; fetch() with { cache: "no-store" } is used; export const dynamic = "force-dynamic" route config. Automatic detection: Next.js analyzes your code at build time. If it can determine all data at build time → static. If it detects dynamic functions → dynamic. Opting in/out explicitly: export const dynamic = "force-static" (always static, error on dynamic functions), export const dynamic = "force-dynamic" (always dynamic), export const dynamic = "error" (error on dynamic functions — ensures static). Partial rendering: with Suspense, parts of a page can be static while others are dynamic (Partial Prerendering). Deployment consideration: static routes work on any CDN; dynamic routes require a Node.js server (Vercel Functions, AWS Lambda, etc.).