GetServerSideProps vs getStaticProps in Next.js: Key Differences and Usage

getServerSideProps runs on every request to fetch data at request time, enabling dynamic content. getStaticProps runs at build time to generate static pages, ideal for content that changes rarely or can be updated with revalidation.

Quick Comparison

This table summarizes the main differences between getServerSideProps and getStaticProps in Next.js.

Feature	getServerSideProps	getStaticProps
When it runs	On every request	At build time
Page type	Server-side rendered (SSR)	Static generated (SSG)
Data freshness	Always fresh (real-time)	Static until rebuild or revalidation
Performance	Slower, depends on server response	Faster, served from CDN
Use case	Dynamic data that changes often	Static data or content that changes rarely
Supports Incremental Static Regeneration (ISR)	No	Yes, with revalidate option

Key Differences

getServerSideProps is a function you export from a Next.js page to fetch data on every request. This means the server runs this code each time someone visits the page, so the data is always up-to-date. It is great for pages that need fresh data, like user dashboards or live feeds.

On the other hand, getStaticProps runs only once when you build your app. It generates static HTML files that are served quickly from a CDN. This is perfect for pages where data does not change often, like blogs or marketing pages. You can also use the revalidate option to update the static page after a set time, called Incremental Static Regeneration (ISR).

In summary, getServerSideProps prioritizes fresh data at the cost of slower response times, while getStaticProps prioritizes speed and scalability by pre-building pages with data available at build time or on a schedule.

Code Comparison

Here is how you fetch data using getServerSideProps to show a list of posts fetched on every request.

javascript

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()

  return {
    props: { posts },
  }
}

export default function PostsPage({ posts }) {
  return (
    <main>
      <h1>Posts (Server Side Rendered)</h1>
      <ul>
        {posts.slice(0, 5).map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </main>
  )
}

Output

<main>\n  <h1>Posts (Server Side Rendered)</h1>\n  <ul>\n    <li>Post title 1</li>\n    <li>Post title 2</li>\n    <li>Post title 3</li>\n    <li>Post title 4</li>\n    <li>Post title 5</li>\n  </ul>\n</main>

getStaticProps Equivalent

This example uses getStaticProps to fetch the same posts but only once at build time, making the page static.

javascript

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()

  return {
    props: { posts },
    revalidate: 10 // Rebuild page at most every 10 seconds
  }
}

export default function PostsPage({ posts }) {
  return (
    <main>
      <h1>Posts (Static Generated)</h1>
      <ul>
        {posts.slice(0, 5).map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </main>
  )
}

Output

<main>\n  <h1>Posts (Static Generated)</h1>\n  <ul>\n    <li>Post title 1</li>\n    <li>Post title 2</li>\n    <li>Post title 3</li>\n    <li>Post title 4</li>\n    <li>Post title 5</li>\n  </ul>\n</main>

When to Use Which

Choose getServerSideProps when your page needs fresh data on every request, such as user-specific content, dashboards, or frequently changing data.

Choose getStaticProps when your content is mostly static or changes infrequently, like blogs, documentation, or marketing pages, especially if you want fast load times and scalability. Use the revalidate option for periodic updates without rebuilding the whole site.

Key Takeaways

getServerSideProps fetches data on every request for dynamic, always fresh content.

getStaticProps fetches data at build time for fast, static pages with optional revalidation.

Use getServerSideProps for user-specific or frequently changing data.

Use getStaticProps for mostly static content needing speed and scalability.

Incremental Static Regeneration with getStaticProps allows periodic updates without full rebuilds.