What is the difference between getServerSideProps/getStaticProps and App Router data fetching?

Q: What is the difference between getServerSideProps/getStaticProps and App Router data fetching?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block says which version it ran on. ## 1. Why This Even Matters — A Story First The Pages Router is a restaurant where only the head chef may shop for ingredients, before cooking starts, and the shopping list is stapled to every plate that goes out. The App Router lets each cook fetch what their dish needs, and the plate carries only the finished food. ## 2. The Core Idea 📌 **Interview term: getServerSideProps** — a Pages Router function that runs on every request and returns props for the page

The problem

Question presented to candidate: "If I know getServerSideProps and getStaticProps, how does data fetching in the App Router map to them, and what actually changes for the user and the payload?"

What a strong answer should cover:

Pages Router: getServerSideProps runs per request, getStaticProps at build (with revalidate for ISR), getStaticPaths lists dynamic pages; only the page file can fetch.
Their return value is serialized into __NEXT_DATA__ JSON in the HTML, including props the component never renders.
App Router: any Server Component can await data; the rendering mode (static, ISR, dynamic) follows from what the code reads and its cache settings.
The mapping: getServerSideProps is a dynamic route, getStaticProps is a static route with fetch caching or revalidate, getStaticPaths is generateStaticParams.
The client receives the RSC payload (rendered output) instead of the raw props JSON.

Clarifying questions expected:

"Is the app migrating incrementally?" — both routers can run side by side.
"Which pages need per-request data?" — they become dynamic routes.

Code / implementation expected: Yes — the same page in both routers.

nextjs
getserversideprops
getstaticprops
data-fetching

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block says which version it ran on.

1. Why This Even Matters — A Story First

The Pages Router is a restaurant where only the head chef may shop for ingredients, before cooking starts, and the shopping list is stapled to every plate that goes out. The App Router lets each cook fetch what their dish needs, and the plate carries only the finished food.

2. The Core Idea

📌 **Interview term: getS

The solution is hidden so you can try first

5 min read · 8 sections

Read the code

The same page in both routers

// pages/products/[id].tsx  (Pages Router)
export async function getServerSideProps({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
  return { props: { product } };            // whole object goes into __NEXT_DATA__
}
export default function Product({ product }: { product: { name: string } }) {
  return <h1>{product.name}</h1>;
}

// app/products/[id]/page.tsx  (App Router)
import { cookies } from "next/headers";
export default async function Product({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  await cookies();                          // per-request, like getServerSideProps
  const product = await getProduct(id);
  return <h1>{product.name}</h1>;          // only the rendered output is sent
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.