mediumFrontend

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?

**TL;DR.** In the **Pages Router**, getStaticProps (build-time) and getServerSideProps (per-request) fetch data and **pass props** to a page. The **App Router** replaces both with **async Server Components** that fetch **directly**, using fetch caching/ revalidate to choose static vs dynamic per call — more **granular and colocated**. Pages Router getStaticProps (build) getServerSideProps (req) → props to page <te

968 views

Understand the problem

Pages data functions vs async Server Components.

nextjsgetserversidepropsgetstaticpropsdata-fetching

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

SSR page, both routers

// Pages Router
export async function getServerSideProps() {
  return { props: { data: await getData() } };
}
export default function Page({ data }) { /* ... */ }

// App Router — inline, dynamic via no-store
export default async function Page() {
  const data = await fetch('https://api/data', { cache: 'no-store' }).then(r => r.json());
  return /* ... */;
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the Data Cache in Next.js and how do you opt out of it?

What makes a route dynamic in the Next.js App Router?