CodePark/ questions / App vs Pages Router
START PRACTICINGPRACTICE
Frontend question · Next.js › App vs Pages Router

What do getServerSideProps, getStaticProps and getStaticPaths do, and what replaces them in the App Router?

// Pages Router
export async function getStaticProps() {
  const posts = await getPosts();
  return { props: { posts }, revalidate: 60 };
}

// App Router
export const revalidate = 60;
export default async function Page() {
  const posts = await getPosts();
  return <PostList posts={posts} />;
}

They are the Pages Router's data functions. In the App Router, async Server Components and a few exports replace them.

In the Pages Router:

  • getServerSideProps runs on every request and passes props to the page.
  • getStaticProps runs at build time. With a revalidate value, it enables ISR (Incremental Static Regeneration: rebuilding the static page in the background).
  • getStaticPaths lists which dynamic paths to prerender. Its fallback option controls unknown paths.

In the App Router:

  • The page itself is an async Server Component that fetches its own data.
  • Static rendering is the default.
  • Request-time rendering happens when you use dynamic APIs (request-time APIs like cookies() or searchParams), or set dynamic = "force-dynamic".
  • ISR uses export const revalidate, or fetch with next.revalidate.
  • generateStaticParams replaces getStaticPaths.
  • dynamicParams replaces fallback.
  • getServerSideProps runs on every request, getStaticProps runs at build time, and getStaticPaths lists which paths to prerender.
  • In the App Router, async Server Components fetch their data directly.
  • Dynamic APIs or force-dynamic replace getServerSideProps.
  • An exported revalidate replaces the revalidate option of getStaticProps.
  • generateStaticParams replaces getStaticPaths, and dynamicParams replaces fallback.