How do you fetch data for SSG in a Next.js Server Component?

WHAT THIS TESTS: This question evaluates your understanding of data fetching in the Next.js App Router, specifically how Server Components handle static site generation. In this model, components marked as async run exclusively on the server during the build process for routes that are not dynamic. The interviewer wants to see that you know native fetch is available directly in these components without client-side hooks, and that the resulting HTML is prerendered and cached as static output. They are also looking for awareness of the shift from the older Pages Router paradigm to the newer mental model where data fetching is colocated with the component that consumes it.

A GOOD ANSWER COVERS: A strong response hits four points in order. First, state that the page must be an async Server Component, which is the default in the App Router. Second, show that you call the native fetch API directly inside the component body to retrieve data, noting that no import is needed because it is the built-in Web API. Third, explain that for static routes Next.js executes this fetch at build time and automatically caches the result unless configured otherwise. Fourth, describe that the fetched data is passed directly into JSX without useState or useEffect, producing static HTML that requires zero client JavaScript for the data layer.

COMMON WRONG ANSWERS: Candidates often slip into Pages Router patterns by mentioning getStaticProps or getServerSideProps, which do not exist in the App Router. Another red flag is suggesting useEffect or useState inside the Server Component to manage the fetched data, since Server Components cannot use client hooks. Some also incorrectly state that you must import fetch from a Next.js package, not realizing it is the standard Web API. Others forget that the component must be declared as async to use await at the top level. Finally, confusing static generation with server-side rendering per request is a frequent mistake at the senior level.

LIKELY FOLLOW-UPS: An interviewer might ask how you would revalidate static data after build using revalidate or on-demand revalidation. They may also ask what happens if the route becomes dynamic, requiring you to switch to dynamic rendering or use generateStaticParams for dynamic segments. Another common pivot is asking how fetch caching behavior changes with cache no-store or next revalidate options, or when you would move data fetching down into a specific component rather than the page itself. You might also be asked about error handling, such as what happens when the fetch fails during the build and how that impacts the build process.

ONE CONCRETE EXAMPLE: Imagine a blog index at app/posts/page.js. You export an async function called page. Inside the function, you write const res equals await fetch and pass the API URL. You then call const posts equals await res.json. You map over the posts array to return a ul list where each li contains the post title. Because this file sits in the App Router and does not use dynamic params, Next.js will execute the fetch at build time, cache the JSON response, and emit static HTML for the list of posts. No client-side fetching library is required.