GetStaticProps vs GetServerSideProps: Next JS Data Fetching

Hello friends, NextJS offers several different data fetching strategies. Today we are going to learn about GetStaticProps vs GetServerSideProps: Next JS Data Fetching. So let’s begin.

Next.JS is a tool employed primarily to build server-side rendered websites that generate the HTML dynamically through a server during every instance of receiving a new request.

Data fetching in Next.js allows you to render your content in different ways, depending on your application’s use case. These include pre-rendering with Server-side Rendering or Static Generation, and updating or creating content at runtime with Incremental Static Regeneration.

So let’s start with GetStaticProps.

GetStaticProps

This method is primarily used inside a page to fetch data at build time.

Once the app is built, it will refuse to refresh the data till the time another build has been run.

The advantage of using GetStaticProps is that it lets the page be statically generated. As a result, out of all the available data fetching methods, GetStaticProps generates the fastest load times.

As the data is rendered before it reaches the client, the SEO of the page improves by leaps and bounds.

You should use getStaticProps if:

The data required to render the page is available at build time ahead of a user’s request

The data comes from a headless CMS

The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance

The data can be publicly cached (not user-specific). This condition can be bypassed in certain specific situations by using a Middleware to rewrite the path.

Example:- how you can fetch a list of articles from a CMS.

// articles will be populated at build time by getStaticProps()
function Article({ articles }) {
  return (
    <ul>
      {articles.map((article) => (
        <li>{article.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
  // Call an external API endpoint to get articles.
  // You can use any data fetching library
  const res = await fetch('https://.../articles')
  const articles = await res.json()

  // By returning { articles: { articles } }, the Artical component
  // will receive `articles` as a prop at build time
  return {
    props: {
      articles,
    },
  }
}

export default Article

Runs on every request in development

In development (next dev), getStaticProps will be called on every request.

GetServerSideProps

This method is primarily used to fetch data for every instance that a user issues a request to the page.

It fetches the data first before sending the page to the client. Should the client happen to issue a subsequent request, the data is fetched again.

Using GetServerSideProps allows you to improve your SEO as in this method the data is rendered before it reaches the client.

As the data is refreshed every time the user loads the page, they can view the updated information at all times.

When should I use getServerSideProps

You should use getServerSideProps only if you need to render a page whose data must be fetched at the requested time. Pages using getServerSideProps will be server-side rendered at request time and only be cached if cache-control headers are configured.

Example:- how to fetch data at request time and pre-render the result.

function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Page

If you do not need to render the data during the request, then you should consider fetching data on the client-side or getStaticProps method.

Happy Coding !!! 🙂