Next.js gives you several places to fetch data, each with a different timing model. Picking the right one is mostly about when does the data become known and how often does it change.

Pages Router (legacy but still common)

getStaticProps — Static Site Generation (SSG)

Runs once at build time (or on-demand via ISR). Output is HTML + JSON, cached on CDN.

export async function getStaticProps() {
  const posts = await fetchPosts();
  return {
    props: { posts },
    revalidate: 60, // ISR: regenerate at most once per 60s
  };
}

export default function Blog({ posts }) {
  return <PostList posts={posts} />;
}

Use when:

• Data is shared across users (blog posts, marketing pages, product catalog).
• Slight staleness is OK (revalidate controls how stale).
• You want max performance + CDN cacheability.

For dynamic routes, pair with getStaticPaths:

export async function getStaticPaths() {
  const posts = await fetchPostSlugs();
  return {
    paths: posts.map(slug => ({ params: { slug } })),
    fallback: 'blocking', // or 'true' for streamed fallback, false for 404
  };
}

getServerSideProps — Server-Side Rendering (SSR)

Runs on every request. No caching by default.

export async function getServerSideProps({ req, params }) {
  const session = await getSession(req);
  if (!session) return { redirect: { destination: '/login', permanent: false } };
  const data = await fetchUserData(session.userId);
  return { props: { data } };
}

Use when:

• Response depends on cookies, headers, user identity, or anything per-request.
• Data must be 100% fresh on each load.
• You can't precompute the page (real-time prices, personalized dashboards).

Trade-off: every request hits your origin. Slower TTFB than SSG; CDN can't cache (unless you set Cache-Control + s-maxage explicitly).

Client-side fetching (useEffect / SWR / React Query)

For data that doesn't need to be in the initial HTML (after first paint):

const { data } = useSWR('/api/user', fetcher);

App Router (Next 13+)

getStaticProps/getServerSideProps don't exist. Instead, Server Components fetch directly, and fetch options control caching:

// SSG: cache forever (default in 13/14)
const data = await fetch('https://api.example.com/posts');

// ISR: revalidate every 60s
const data = await fetch(url, { next: { revalidate: 60 } });

// SSR: never cache, run per-request
const data = await fetch(url, { cache: 'no-store' });

// Tag-based invalidation
const data = await fetch(url, { next: { tags: ['posts'] } });
// then later: revalidateTag('posts')

Note: Next 15 reversed the default to cache: 'no-store' — opt into caching with { cache: 'force-cache' } or next: { revalidate }. Check the version you're on.

Choosing in App Router

Decision flow

1. Is the data per-user / per-request? → SSR (getServerSideProps or cache: 'no-store').
2. Can it be precomputed? → SSG.
3. Mostly static but updates occasionally? → ISR (revalidate or revalidateTag).
4. Only needed after first paint? → Client fetch (SWR, React Query).

Common gotchas

• getServerSideProps defeats CDN caching unless you set Cache-Control: s-maxage=… in the response headers.
• getStaticProps doesn't have access to req — no cookies, no headers. Move to SSR if you need them.
• ISR's first request after revalidate expires gets the stale page; the next request gets the regenerated one (stale-while-revalidate semantics).
• App Router's fetch is deduped per request — multiple components requesting the same URL hit the network once.