Static site generation in Nextjs using getStaticProps() function

#javascript #react #nextjs #getstaticprops

Originally posted here!

What is static site generation?
Using the getStaticProps() function

What is static site generation?

Just like the word static, it means not changing. 🧘‍♂️

Benefits include:

Better SEO 🕶
Performance 🚀
Can be hosted in CDN 🌍
Doesn't need to have JavaScript to run (mostly HTML) ⚙️
Very fewer things to parse from server to client 🌬

So why do we need a static site?

Let's take an example of a landing page for a company, a landing page doesn't need any type of dynamic content such as pulling data from different API's and showing it according to their users.

A user who accesses a landing page of a company needs to see what that company is about, its main feature, achievements, etc, which are all static things.

The second example is this blog, this blog is statically generated from markdown files. Its main purpose is to provide information to you. It doesn't change or pull data from different APIs.

Dynamic sites include websites like Facebook, Twitter, etc, which changes content according to their users.

So let's dive in! 🏊‍♀️

Static site generation in nextjs

To make better use of Static site generation in Nextjs, let's understand getStaticProps() function.

Using the `getStaticProps()` function:

This function is added to a Nextjs page so that it fetches data at build time.

First of all, let's make a simple Nextjs page called todos.js inside our pages folder.

// Todos.js Page
const Todos = () => {
  return <h1>Todos</h1>;
};

export default Todos;

let's add the getStaticProps() function.

const Todos = () => {
  return <h1>Todos</h1>;
};

export default Todos;

// add getStaticProps() function
export async function getStaticProps() {}

The getStaticProps() function gives props needed for the component Todos to render things when Nextjs builds the page.

Note that we added the async keyword, this is needed so that Nextjs knows to prerender our Todos page at build time.

let's write some code inside the getStaticProps() function.

const Todos = () => {

.
.
.

// add getStaticProps() function
export async function getStaticProps(){

    // Get todo list from an API
    // or from anything like a JSON file etc.
    const todos = await fetch('https://.../todos');

    return {
        props: {
            todos
        }
    }
}

We can get our todo list data from an API endpoint or anything like JSON file etc.
We should return the todos array within the props object like this

return {
  props: {
    todos,
  },
};

Now let's complete our Todos render code.

const Todos = ({ todos }) => {
  // render code
  return (
    <div>
      <h1>Todos</h1>
      <ul>
        {todos.length > 0 ? todos.map((todo) => <li>{todo}</li>) : "No todos"}
      </ul>
    </div>
  );
};

export default Todos;

// add getStaticProps() function
export async function getStaticProps() {
  // Get todo list from an API
  const todos = await fetch("https://.../todos");

  return {
    props: {
      todos,
    },
  };
}

Let's break down our render logic.

// render code
return (
  <div>
    <h1>Todos</h1>
    <ul>
      {todos.length > 0 ? todos.map((todo) => <li>{todo}</li>) : "No todos"}
    </ul>
  </div>
);

We are just mapping over our todos array we received as a prop and rendering each todo from the array inside an unordered list using the map() function in JavaScript.

The todos prop is returned from getStaticProps() function.

Now if you inspect element your webpage, you can see this:

Wonderful! You just made your page static 🤓.

This helps in SEO.

Feel free to share if you found this useful 😃.

Top comments (5)

Francesco Mari • Feb 14 '23 • Edited

I think that this example is a bit misleading - it doesn't make much sense to generate a static page with a todo list, because it's something that is usually often updated. It might have been more realistic to grab a list of blog posts for instance, which is some kind of data that is less often updated.