getStaticProps vs getServerSideProps for Next JS

NextJs is a framework built on ReactJs, used for improving page performance and overall user experience. The problem NextJs solves is related to the nature of single page applications (SPAs), and how they render in the browser.


SPAs built with ReactJs initially load an empty HTML shell in the browser, which is then populated with the rest of the HTML content using Javascript. This technique is great for dynamic web apps that offer a rich user experience. However, because Googlebot crawlers want content fast, it’s not so great for Next JS SEO.

TL;DR: getServer Vs getStatic Quick Links

For those of us who want answers quickly:

How NextJs Helps Solve the SEO Problem With SPAs

NextJs helps solve this problem by utilizing ReactJs to render on the server side, either at build time or at run time. Rendering at build-time amounts to what is known as static site generation (SSG), while rendering at run time (per request) is known as server side rendering (SSR). 

This technique is also known as isomorphic React, a fancy phrase that simply means React that runs on the server. 

Rendering React into HTML on the server offers the best of both worlds; great dev tooling and UX while still feeding content to Googlebot in a timely manner.

NextJs ships with two methods for accomplishing this work on the server: getStaticProps() and getServerSideProps(). These methods can be included in any React component built using Next, which will feed the component with props data either at build time or at run time. 

getStaticProps and getServerSideProps | What’s the Difference?

getStaticProps and getServerSideProps can be defined as follows:

  • getStaticProps(): A method that tells the Next component to populate props and render into a static HTML page at build time. 
  • getServerSideProps(): A method that tells the Next component to populate the props and render into a static HTML page at run time.
Javascript SEO Consultant

Free getServer + getStatic templates

Hey! I’m Scott, I’ve been working on Javascript & highly technical websites for nearly 10 years. Opt-in for and get…

  • Two different boilers plates, one built with getServer and another with getStatic, both are SEO optimized or our standards.
  • Our complete Technical SEO checklist.
  • A bunch of JavaScript SEO tips and Tricks you won’t find anywhere else test

Rendering at build time with getStaticProps() means that prior to hosting the page, the developer (or automation tool) converts the React into raw HTML pages, and only then are the pages hosted and served to clients. Raw HTML pages are optimal for SEO and fast page loading.

Rendering at run time with getServerSideProps() means that the site is live and hosted with React components sitting on the server awaiting a request. However, when a request is made, the server doesn’t send the Javascript React files to the client for rendering. Instead, NextJs tells React to go ahead and render these components into HTML in real time, then send the HTML to the client.

When to use getStaticProps or getServerSideProps?

Determining which method to use depends largely on the nature of your page’s data requirements. 

Javascript SEO Consultant

Free getServer + getStatic templates

Hey! I’m Scott, I’ve been working on Javascript & highly technical websites for nearly 10 years. Opt-in for and get…

  • Two different boilers plates, one built with getServer and another with getStatic, both are SEO optimized or our standards.
  • Our complete Technical SEO checklist.
  • A bunch of JavaScript SEO tips and Tricks you won’t find anywhere else test

If you need a lot of dynamic data on your page, it’s more scalable to render your page at run time (SSR), and therefore getServerSideProps would be the preferred method.  Pages built using getServerSideProps for SSR won’t be as fast as SSG, however, it is optimal when compared to utilizing a standard SPA framework.

If your page is more simple in nature, such as a blog post, you’ll get a performance boost rendering a static HTML page at build time (SSG), and therefore getStaticProps would be preferred. Pages built using getStaticProps for SSG will be very fast.

Code Examples of getStaticProps

If you’re familiar with the React framework, implementing Next doesn’t have a huge learning curve. However, it takes a little getting used to. Remember, NextJs is built on React, so we’re still just coding React components under the hood. 

Let’s take a look at the raw getStaticProps method straight from the NextJs docs before viewing it within a component:

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

Simple enough. What we have here is a simple function that can be exported from a React component built using Next. Now, let’s take a look at a simple component that utilizes this method:

const CoffeeList = ( {coffeeJson} ) => {
  return (
      <div>
          <h1>Coffee List</h1>
              <ul>
                    {coffeeJson.length > 0 ? coffeeJson.map((coffeeItem) => <li>{coffeeItem}</li>) : "No coffee!"}
              </ul>
        </div>
  )
};

export default CoffeeList;

export async function getStaticProps() {
   const coffeeJson = await fetch('https://exampleapi.com/coffelist');
    return {
        props: {
            coffeeJson
        }
    }
}

Reviewing the code above, we have a `CoffeeList` component that displays a list of coffee items. It accepts a prop called “coffeeList” that contains the coffee list data. The coffeList prop was declared and populated in our getStaticProps() method.

    So, the getStaticProps() serves two purposes in this context.

  1. It tells the React framework to render this content at build time.
  2. It populates the data object and sends it to the component as a prop.

Now that we’ve seen what it takes to utilize NextJs for creating an SSG page, let’s see what it takes to render real-time on the server.

Code Examples of getServerSideProps

Using getServerSideProps for SSR is just as easy as utilizing the previous method for SSG. Here’s a raw example of this method straight from the NextJs docs:

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

Strikingly similar to our previous example using getStaticProps! In fact, the only difference is the name of the method itself. So, no need to show another full component example using getServerSideProps(), because the only thing needed to accomplish SSR instead of SSG is to change the name of your method to getServerSideProps().

Overview and Conclusion

NextJs offers two ways to render a web page: as a static HTML page rendered at build time (SSG), or as a dynamically rendered page rendered at run time (SSR). These two techniques have huge implications regarding SEO, and it’s important to understand how to implement them using NextJs.

Javascript SEO Consultant

Free getServer + getStatic templates

Hey! I’m Scott, I’ve been working on Javascript & highly technical websites for nearly 10 years. Opt-in for and get…

  • Two different boilers plates, one built with getServer and another with getStatic, both are SEO optimized or our standards.
  • Our complete Technical SEO checklist.
  • A bunch of JavaScript SEO tips and Tricks you won’t find anywhere else test


    To statically render pages (also known as static site generation, or SSG) that load extremely fast on the client, and can be easily cached using a CDN provider to further increase performance, the getStaticProps() method should be exported from the Next component. 

Using getStaticProps() for SSG is the most optimal technique for generating performant SEO metrics, but is somewhat limited when used with pages that require frequently updated dynamic data.

To render pages at each request (also known as server side rendering, or SSR) that load faster and more efficiently than typical SPAs, the getServerSideProps() method should be exported from the Next component.

Using getServerSideProps() for SSR isn’t quite as optimal as SSG, but it still offers great SEO metrics and allows for extremely scalable pages that are heavily reliant on frequently changing dynamic data.

Where to go from here?

When it comes to creating NextJs apps with performant SEO, it’s much like learning any other framework. The best way to learn is to dive in and create a practice project. We highly recommend heading over to the getting-started page at the NextJs docs to see what you can create!

Leave a Comment

oh my crawl logo
Digital Architecture
For Search Engines
Javascript Frameworks
Most Js Frameworks..
Contact
Brooklyn, NY 11219

Blog