How do you implement SSR in Next.js App Router and configure fetch?

WHAT THIS TESTS: This question probes whether you understand the App Router rendering model. Next.js defaults to static generation at build time, so the interviewer wants to see if you know how to opt into request-time rendering for a specific page using data fetching semantics rather than legacy page-level APIs.

A GOOD ANSWER COVERS: First, state that App Router Server Components are async by default and fetch data directly inside the component body without useEffect. Second, explain that to force Server-Side Rendering on every request, you configure the fetch call to disable caching by passing cache set to no-store or next set to an object with revalidate set to zero. Third, note that this fetch configuration causes the route to be dynamically rendered at request time without needing additional segment config, though you can also use export const dynamic equals force-dynamic as an alternative. Fourth, mention that the fetched data is then used directly in JSX, streamed to the client as HTML.

COMMON WRONG ANSWERS: Mentioning getServerSideProps immediately signals Pages Router thinking. Suggesting useEffect or client-side data fetching inside a Server Component shows confusion about component types. Claiming you must manually disable static generation at the route level with dynamic config demonstrates a lack of understanding that fetch cache behavior drives rendering mode. Proposing revalidate with a positive number is also wrong because that enables ISR, not per-request SSR.

LIKELY FOLLOW-UPS: The interviewer might ask how you would handle authentication or cookies during SSR, which requires reading headers or cookies and also forces dynamic rendering. They might ask what happens if you forget to disable fetch caching, in which case Next.js will cache the response and potentially serve stale data from the build. They could also ask how to mix static and dynamic parts on the same page, which leads to Suspense boundaries and partial prerendering.

ONE CONCRETE EXAMPLE: Imagine a dashboard page that must show live server metrics. You would write an async function Page in page.js that awaits fetch with the URL for metrics and an options object containing cache no-store. Because the fetch opts out of caching, Next.js marks the route as dynamic and renders it on each request. The component then returns a div displaying the metrics. No getServerSideProps function is needed, and no client-side useEffect hook is required.