When to Use Server-Side rendering vs Static Generation in Next.js

Pre-rendering your pages has multiple benefits such as better performance and better SEO. But choosing whether to statically generate your pages or render them on the server side can be confusing.

Let's first take a look at Server-Side rendering

getServerSideProps

The main difference between getServerSideProps and getStaticProps is when they are ran. getServerSideProps is ran when every new request is made to the page.

export async function getServerSideProps(context) {
    const {userId} = context.params
    const user = await getUser(userId)

    return {
        props: {
           user
        }
    }

}

export default function User({user}) {
    return (
        <div>
            <h1>{user.name}</h1>
        </div>
    )
}

In this example we are getting the userId from a dynamic route, getting the information about the user, then using that data to build the user page.

Note that we have access to the request through params

now lets take a look at getStaticProps

getStaticProps

We saw that getServerSideProps gets ran every time a new request is made so what about getStaticProps. getStaticProps is ran at build time, meaning that whenever you run npm run build this is when your static pages are built.

export async function getStaticProps() {
    const blogPosts = await getBlogPosts()

    return {
        props: {
            blogPosts
        }
    }
}

export default function Home({blogPosts}) {
    return (
        <div>
            {blogPosts.map(post => (
                <h1>{post.name}</h1>
            ))}
        </div>
    )
}

this function is getting a list of blog posts and rendering them on a page. Because we know what we want before hand we can statically render the page whereas in our server side rendering example we don't know before the request is made what the user wants.

---

So when to user getServerSideProps?

• Good for when you don't know what the user wants before they make a request
• Still want good SEO

When to use getStaticProps?

• When we know what the user wants at build time
• Really fast performance and SEO

---

This was just a quick dive into static generation vs server-side generation. If you want to learn more please let me know.

As always thanks for reading.

Comments

[Martin Krause]

Hey! Great explanation!
Back in summer I took e deep dive into the different types of pre-rendering with next.js - take a look if you like!

Cheers!

[Aimee]

hey nice blog post, which one should I use then, getByStaticProps, I'm fetching some data from a CMS I set up which stores my projects in then I'm wanting to display this data in my portfolio, I was using getByServerSideProps but I'm thinking I should use the other as it's not rarely going to change unless I go into the CMS and add a new project. Thanks

[coder-pixel]

I think in that case you should go for 'getStaticProps' option, as your data is ll static in general most of the time.

[Emeka Orji]

Amazing Explanation!!👍👍

[Ryan-Mambou]

Excellent article man. Thanks a lot!

[Shuvo Koiri]

Ok,,,,Can you tell me wahich one should I use in index.js for my Blogging website>>>???

[Md Ohidul Islam]

Hello Shuvo Koiri,

I am assuming that your index.js page is responsible for showing a list of blog posts, which we can assume doesn't change so frequently (e.g: Multiple-times in an hour). Therefore you can use getStaticProps with the property revalidate: 10. By doing that Next.js will re-generate only the index.js page at most once every 10 seconds. See the code snapshot below, this is from the official Next.js documentation.

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 10 seconds
    revalidate: 10, // In seconds
  }
}```