GetStaticProps vs GetServerSideProps: Next JS Data Fetching

Whats up buddies, NextJS gives a number of completely different information fetching methods. At the moment we’re going to educate you about GetStaticProps vs GetServerSideProps: Subsequent JS Information Fetching. So let’s start.

Subsequent.JS is a device employed primarily to construct server-side rendered web sites that generate the HTML dynamically via a server throughout each occasion of receiving a brand new request.

Information fetching in Subsequent.js permits you to render your content material in several methods, relying in your utility’s use case. These embody pre-rendering with Server-side Rendering or Static Era, and updating or creating content material at runtime with Incremental Static Regeneration.

So let’s begin with GetStaticProps.

GetStaticProps

This methodology is primarily used inside a web page to fetch information at construct time.

As soon as the app is constructed, it would refuse to refresh the information until the time one other construct has been run.

The benefit of utilizing GetStaticProps is that it lets the web page be statically generated. In consequence, out of all of the accessible information fetching strategies, GetStaticProps generates the quickest load instances.

As the information is rendered earlier than it reaches the shopper, the search engine optimisation of the web page improves by leaps and bounds.

It’s best to use getStaticProps if:

The information required to render the web page is offered at construct time forward of a consumer’s request

The information comes from a headless CMS

The web page have to be pre-rendered (for search engine optimisation) and be very quick — getStaticProps generates HTML and JSON recordsdata, each of which might be cached by a CDN for efficiency

The information might be publicly cached (not user-specific). This situation might be bypassed in sure particular conditions through the use of a Middleware to rewrite the trail.

Instance:- how one can fetch a listing of articles from a CMS.

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

// This operate will get known as at construct time on server-side.
// It will not be known as on client-side, so you possibly can even do
// direct database queries.
export async operate getStaticProps() {
  // Name an exterior API endpoint to get articles.
  // You should utilize any information fetching library
  const res = await fetch('https://.../articles')
  const articles = await res.json()

  // By returning { articles: { articles } }, the Artical element
  // will obtain `articles` as a prop at construct time
  return {
    props: {
      articles,
    },
  }
}

export default Article

Runs on each request in improvement

In improvement (subsequent dev), getStaticProps will probably be known as on each request.

GetServerSideProps

This methodology is primarily used to fetch information for each occasion {that a} consumer points a request to the web page.

It fetches the information first earlier than sending the web page to the shopper. Ought to the shopper occur to concern a subsequent request, the information is fetched once more.

Utilizing GetServerSideProps permits you to enhance your search engine optimisation as on this methodology the information is rendered earlier than it reaches the shopper.

As the information is refreshed each time the consumer hundreds the web page, they’ll view the up to date info always.

When ought to I take advantage of getServerSideProps

It’s best to use getServerSideProps provided that it is advisable render a web page whose information have to be fetched on the requested time. Pages utilizing getServerSideProps will probably be server-side rendered at request time and solely be cached if cache-control headers are configured.

Instance:- fetch information at request time and pre-render the outcome.

operate Web page({ information }) {
  // Render information...
}

// This will get known as on each request
export async operate getServerSideProps() {
  // Fetch information from exterior API
  const res = await fetch(`https://.../information`)
  const information = await res.json()

  // Cross information to the web page through props
  return { props: { information } }
}

export default Web page

If you don’t want to render the information through the request, then you need to contemplate fetching information on the client-side or getStaticProps methodology.

Comfortable Coding !!! ?