getServerSideProps vs getStaticProps: Choosing the Right Data Fetching Method in Next.js

Next.js is a powerful JavaScript framework which stands out with its ability to perform server-side rendering (SSR). The HTML for a page is generated server-side and served to users in response to a request. It improves performance and results in faster page loads.

Another important feature of Next js is static site generation (SSG) which allows HTML pages to be generated at the build time and reused on each request. Using this method, the stress on the server is really lessened and the performance of the site increases as there is no need to render the same page for each request.

To achieve this feature in Next.js, two important functions play an important role including getServerSideProps and getStaticProps. These functions are used to fetch data which is required for rendering the pages. The getServerSideProps is used for SSR and getStaticProps the function is used for SSG.

 

The getServerSideProps in Next.js

The getServerSideProps function allows achieving the server-side rendering of Next js pages. This function allows the fetching of data required for the rendering pages on the server side before it is served to the user’s view. Let’s have a detailed use-case with examples in the sections ahead:

 

Purpose of getServerSideProps

The getServerSideProps function helps in fetching the data asynchronously every time a new request is made to the server. The main purpose of using this function is to fetch the data server-side and pass it as props to the page which is then used to render data.

The getServerSideProps function is a perfect choice for pages, where data is always changing and needs to be updated on each user request.

You should be using the getServerSidePropsfunction in the following use cases when:

• The data we are fetching is changing frequently.
• The data is user-specific and cannot be cached.
• SEO is not a top priority or concern. As the pages using getServerSideProps will not be pre-rendered.

 

How to use getServerSideProps with Examples

Let’s have a look on a basic example of how getServerSideProps works:

// pages/index.js
import fetch from 'isomorphic-unfetch';

const HomePage = ({ data }) => (
  <div>
    <h1>{data.title}</h1>
    <p>{data.description}</p>
  </div>
);

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

export default HomePage;

In this above example, getServerSideProps fetches data from an API and passes it as props to the HomePage component. This data is fetched server-side on every request to the page.

 

The getStaticProps in Next.js

Next.js has another data fetching method called getStaticProps which is used for static site generation (SSG). This feature is used to pre-render the pages at build time.

The getStaticProps function is an asynchronous function which is used to fetch data at build time and pass it as props to the page. This function runs only once at build time on the server and the result is then cached and reused for all requests to the page.

When to Use getStaticProps

We can use the getStaticProps function when:

• The data we’re fetching remains the same for all users like About Us, Contact Us, privacy policy etc.
• The change in page data is infrequent.
• The page needs to be optimized for SEO, as pages using getStaticProps will be pre-rendered.

 

How to use getStaticProps with Examples

Here is a basic example of how getStaticProps works:

// pages/index.js
import fetch from 'isomorphic-unfetch';

const HomePage = ({ data }) => (
  <div>
    <h1>{data.title}</h1>
    <p>{data.description}</p>
  </div>
);

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

export default HomePage;

ThegetStaticProps fetches data from an remote API and passes it as the props to the HomePage component. This data fetching occurs once at the build time on the server. Thereafter the result is cached and reused for all subsequent request to the page.

 

Comparison between getServerSideProps and getStaticProps

Both getServerSideProps and getStaticProps are used for data fetching in Next.js but they serve different purposes and are used in different scenarios.

Understanding the differences and similarities between these two functions will help in choosing the right data-fetching strategy for the Next.js application. Let’s have a quick look on major differences and similarities below:

 

Differences and Similarities

	getServerSideProps	getStaticProps
Rendering	Server-side	Pre-rendered at build time
When it runs	On every request	Once at build time
Ideal for	Data that changes frequently or user-specific	Data that is the same for all users and changes infrequently
SEO	Not optimized	Optimized

 

Which to use getServerSideProps or getStaticProps?

We have already discussed in detail their usage and various scenarios where we can use any of them. Let’s have another quick look at which one to use from getServerSideProps or getStaticProps:

We use getServerSideProps if we need to load a page with the latest data which changes frequently or is user-specific. The page where data need to be always up to date, this function runs on every request. A page will always load data on the server side, so there will be performance hits and the page will not be as fast as statically loaded pages.

On other side, we use getStaticProps if we need to load pages, that could have data which will remain same for all the users and does not change frequently. This function only runs once at build time and the data is cached and reused for all upcoming requests. This makes the pages fast to load and hence suitable for fast-loading apps.

Can we use getStaticProps or getStaticPaths with getServerSideProps?

We can’t use both getStaticProps or getStaticPaths with getServerSideProps in the same file as these functions are used for different purposes as we already discussed. The getStaticProps is used for static generation (SSG), while getServerSideProps is used for server-side rendering (SSR).

 

Conclusion

In this detailed guide, we discussed what is the difference between getStaticProps and getServerSideProps and how we can use them in various use cases with examples. Both these functions play and important role in building the Nextjs application’s core feature which is server-side rendering.