Next.js › Pages Router Data Fetching (getStaticProps, getServerSideProps & getStaticPaths)

If you are migrating a page from getStaticProps to the App Router, how do the equivalent data fetching patterns compare?

Advanced

Answer

In the App Router, you simply use an async server component and call fetch or a database query directly inside it, using the next.revalidate option on your fetch call to replicate the time based caching behavior that getStaticProps previously handled through its own revalidate return value.

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

// App Router equivalent
export default async function Page() {
  const res = await fetch(url, { next: { revalidate: 60 } });
  const posts = await res.json();
  return <PostList posts={posts} />;
}

Real-world example A team migrating their blog from the Pages Router to the App Router replaces their getStaticProps function with a simple async server component using an equivalent revalidate option on their fetch call.

Common follow-ups: What other Pages Router specific functions need equivalents when migrating to the App Router?;Are there any behavioral differences to watch out for during this kind of migration?

Rendering (SSR/SSG/ISR);Server Components