Dynamic functions rely on information that can only be known at request time such as a user's cookies, current requests headers, or the URL's search params. In Next.js, these dynamic functions are:

1
cookies() and headers(): Using these in a Server Component will opt the whole route into dynamic rendering at request time.
2
useSearchParams(): In Client Components, it'll skip static rendering and instead render all Client Components up to the nearest parent Suspense boundary on the client. We recommend wrapping the Client Component that uses useSearchParams() in a <Suspense/> boundary. This will allow any Client Components above it to be statically rendered.

Difficulty: 5/10

Topics: server components, dynamic data fetching, Next.js caching

Scenario Questions

0-2 years experience

1
How would you fetch data inside a server component using the built‑in fetch function and control its caching?
2
What happens if you call the cookies() function inside a server component?
3
Which dynamic function would you use to trigger a redirect from a server component, and how does it work?

2-5 years experience

1
You notice that a page using fetch in a server component is not revalidating as expected. Walk me through how you would debug it using the dynamic functions available.
2
Explain a scenario where you would choose revalidatePath versus revalidateTag in a server component, and the trade‑offs involved.
3
If you need to read request headers in a server component, which function do you use and what are its limitations?

5-8 years experience

1
Design a strategy for a large e‑commerce site to invalidate cached data across many server components when inventory changes, using the dynamic functions. What edge cases do you consider?
2
How would you architect a feature that conditionally disables caching for certain server component calls, and which functions would you employ?
3
Discuss the performance implications of using unstable_noStore versus cache in high‑traffic server components.

8+ years experience

1
Your organization is migrating a monolith to Next.js with server components. How would you establish guidelines for using dynamic functions like redirect, notFound, and revalidateTag to ensure consistency and avoid subtle bugs across teams?
2
When multiple teams need to share a common data‑fetching layer in server components, how would you design an abstraction that leverages the built‑in dynamic functions while keeping the API stable?
3
Consider a scenario where a legacy API returns varying cache headers. How would you reconcile those with Next.js’s dynamic functions to maintain correct revalidation across the platform?

Follow-up Questions

❓Can you give an example of when you’d prefer revalidateTag over revalidatePath?
❓What pitfalls have you seen when using redirect inside a server component?
❓How does unstable_noStore impact SSR performance and cache behavior?