Static site generation (SSG) with Nextjs
Tags: nextjs, react, frontend, static
Published: 2020-09-17 18:09:14

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.
```js
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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rm0h3jdk5rc4qt0o5s4r.png)
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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kjczy0hogk13vssg352y.png)

**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.
```js
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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6e1lnfg35eq18v2ml4au.png)
In this new file, we also need the `getStaticProps`, but we will also add a new `getStaticPaths` function.
```js
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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0u6wph2b5qz17w8xzclz.png)
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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bgfq89lbgkk0h9whynnf.png)

And with this I finish a small introduction to the generation of static pages with one of my favorite frameworks at the moment ❤️.

Thanks for reading me!
![gif](https://media.giphy.com/media/osjgQPWRx3cac/giphy.gif)