What’s the difference between getStaticProps and getServerSideProps in Next.js?

[arverse-u]

Summary

I’m building a blog using Next.js and came across two data fetching methods: getStaticProps and getServerSideProps.

I understand that both are used to fetch data for pre-rendering pages, but I’m not sure when to use which one.

Can someone explain the key differences between them and give examples of when to use each?

Additional information

No response

Example

No response

[AjayKumbham]

Great question!

🔹 getStaticProps: Runs at build time. It pre-generates the page as static HTML. It’s perfect for content that doesn’t change often — like blog posts or marketing pages.

🔹 getServerSideProps: Runs on every request. It generates the page at runtime. Use it when the data is dynamic or depends on the request (e.g., user session, query params).

💡 Pro Tip: Use getStaticProps + revalidate (ISR) if you want to serve static content that can also update in the background!

[icyJoseph]

Please refer to the documentation:

• https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props
• https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props

I'd say, favor the App Router, but if you must use Pages Router...

You should favor using getStaticProps, optionally with revalidate, so that your pages are statically optimized and can be served immediately. This is also beneficial when used behind a CDN, which an cache thing further, closer to users.

This also means that search params in UI, have special behavior, in Pages Router, the page is statically optimized using an empty search params object, and immediately re-rendered client side, you still need to cover the empty search params code path for the build time run.

However, there's data, personalized, real-time, etc, that shouldn't be cached, and should always be shown at their very latest state, then getServerSideProps is a good option, cuz the page is generated as requested.

That being said, App Router covers both of these, by allowing you to fetch the data within the React component.

getStaticProps and getServerSideProps, are a top down abstraction, their output is used to render a component tree. All the data you return from this functions is visible client side too, even if you filter some stuff out as you render. You have to filter it within the functions if you want to keep it private.

Also good to know that getServerSideProps, and all of the code it references, is NOT send to the client, https://next-code-elimination.vercel.app/ -