Static site generation (SSG) with Nextjs

#nextjs #react #frontend #static

Hi! In this post I want to talk about static files in next.js, when and how to use them to improve our application performance.

I have been working with Nextjs for a while.
It is a very powerful framework, since it solves many problems that we find when code an application with reactjs, such as the use of webpack, routing, etc.
But of course all this can be modified as we want.

Also with nextjs we have two types of rendering: Server Side Rendering (SSR) and Static Generation (SSG).
Next we are going to talk about this last type, which is the competition of the well-known Gatsby to generate static pages.

How can I create static pages?

To make our pages static, we just have to add the getStaticProps function to our page.

const Contact = ({title}) => (
  <>
    <h1>{title}</h1>
  </>
)

export async function getStaticProps(context) {
  return {
    props: {
      title: "Contact"
    },
  }
}

export default Contact

As with getInitialProps or getServerSideProps, what we return are the parameters that later arrive at our application as props.

Only with this, the contact page will be rendered statically AT BUILD TIME.
We can check it by running yarn build, And this is the output we get:

We can see in the legend that the contact page has been exported to a static file and also its size, and we can see it in the file explorer.

But this is not all, for example it may be that at some point changes have been added to a page that has already been generated statically and we want it to be regenerated with this new content in production.
For this, from version 9.5 of nextjs we have "Incremental Static Regeneration" that will allow us to configure every few seconds we want this page to be rendered again.
This can be done very easily just by adding revalidate to what getStaticProps returns.

export async function getStaticProps(context) {
  return {
    props: {
      title: "Contact",
      // Next.js will attempt to re-generate the page:
      // - When a request comes in
      // - At most once every second
      revalidate: 1, // In seconds
    },
  }
}

All this is great for those pages that are not very common that can change as an information page, a contact page, etc. but ...

What happens to pages that are dynamic?

For this we have another function with which we can indicate which routes we want it to export statically.
We need a dynamic route, for example if we want to export our blog posts, we should have something like this in our files.

In this new file, we also need the getStaticProps, but we will also add a new getStaticPaths function.

const PostPage = () => {
  const router = useRouter()
  const {
    query: { id }
  } = router

  return (
    <>
      <h1>POST #{id}</h1>
    </>
  );
};

export async function getStaticPaths() {
  return {
    paths: [{
      params: {id: '1'}
    }],
    fallback: false
  }
}

export async function getStaticProps(context) {
  return {
    props: {},
  }
}

export default PostPage

What are we returning?

paths: Routes that we can export. For example we can generate them with a map function.
fallback: With this prop we can tell nextjs that if there is no certain route within paths, force its rendering.

With the previous example, if we execute yarn install, we get the following console output:

In the previous image, we can see how the routes that we have established have been exported, and we can also find them in the file system.