Quickly Understand getStaticProps in Next.js

This tutorial is all about trying to understand the basics you need to know to start using getStaticProps.

Photo by Marc-Olivier Jodoin on Unsplash

Why should I read this?

• What is Static Site Generation also known as SSG?
• The difference between build time and request time
• How do we use SSG in Next.js (using getStaticProps)?
• Why do we want to use SSG in our web application?
• What is a client-side bundle in the context of Next.js?

Let’s get started!

What is Static Site Generation?

This is a technique used to serve static content in the form of HTML to the client side (a client usually refers to the browser you are viewing the frontend of the application from) at a speed even faster than server-side rendering.

Tip: Static content is exactly what it is. Once the content has arrived in our browser, it does not change and can become stale over time i.e. the data becomes outdated. So if your webpage serves content that is constantly changing, then server-side rendering may be a better fit for the job.

This is what I do:

• Use SSG for serving the initial data your website needs i.e. the data that is needed at build time when a new visitor first makes a request to fetch your website.
• You can also think of it this way — use SSG when I do not care about what the user has requested on my website. The data requested at build time remains the same regardless of what the user is doing on the Frontend.

If you are thinking of switching to a career in tech or changing to a new tech job, here are some job sites you can get started with:

Photo by Mukuko Studio on Unsplash

• https://underdog.io
• https://dailytechjobs.com
• https://www.hiretechladies.com
• https://weworkremotely.com

Do something today!

Build Time v.s. Request Time

What is the difference between these two concepts?

• Build time happens when our web application is first served to the user when they open up their browser to visit our website.
• Note this is not the same as making requests on our website — the user at this point has simply opened their browser to go to our website for the first time.
• Content served at build time is what we call SSG.
• Request time, on the other hand, serves content based on the request of the user — basically, serving dynamic content based on the user’s action.
• Content served at request time is what we call SSR.

How do we achieve SSG in Next.js?

In Next.js, we use getStaticProps to achieve SSG.

This is how you would use it in your Next.js application.

We use this getStaticProps in Pages NOT components in a Next.js application.

getStaticPaths, getStaticProps and getServerSideProps only work in Pages in a Next.js application so make sure you are in the pages directory and don’t mistakenly use them in one of your React components in your component directory.

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}
export async function getStaticProps() {  
  const res = await fetch('https://.../posts')
  const posts = await res.json()
  return {
    props: {
      posts,
    },
  }
}
export default Blog

The flow is like this:

1. User opens their browser and visits our website at example.com
2. We serve the entire website with Next.js over Vercel
3. Vercel servers fetch the initial data that is needed for the website for example like a list of images for the landing page
4. Vercel adds the data to the HTML and prepares everything the HTML needs before sending over to their CDN (Content Delivery Network) technology
5. The finished HTML is caches on Vercel’s CDN of choice and the CDN then serves the finished HTML to your browser. And this is why it is so fast because a CDN usually puts data that is closet to your computer. So if you requested our example.com in Japan, then Vercel CDN will try to find a server on their edge network that is of the shortest distance to your computer in Japan, for example, a server in Singapore.
6. Finally, you see the HTML in your browser in Japan served to you from the server in Singapore. The CDN is the secret ingredient to the lightning speed of SSG.

What is the client-side bundle?

This is the size of your application in Bytes that the server has to send to the browser in order to make your web application accessible by users on the web.

The smaller the client-side bundle, the better.

This is a snippet taken from the Next.js Official Website:

“getStaticProps always runs on the server and never on the client. You can validate code written inside getStaticProps is removed from the client-side bundle with this tool.”

Another snippet taken from Next.js site:

“You can import modules in top-level scope for use in getStaticProps. Imports used will not be bundled for the client-side. This means you can write server-side code directly in getStaticProps, including fetching data from your database.”

Why do you want to use SSG?

• Happier users due to your lightning quick website
• Good for SEO ranking purposes on Google (SEO aka Search Engine Optimisation)

How do we achieve SSR in Next.js?

Good question!

You can find more information about SSR here.

Tip: A good rule of thumb on knowing when to use SSG or SSR is to ask yourself this one question — is the data I am serving to my user dependant on the user’s actions e.g. their username on a form they have to fill online — if it is dependent on the information supplied by the user at request time, then use SSR.

We publish short tech tutorials on a weekly basis so consider subscribing to our Medium Blog.

Until next time — keep coding while moving small steps forward on this coding adventure of yours.

But more importantly, stay focused!