DEV Community

Dylan Muraco
Dylan Muraco

Posted on

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>
    )
}
Enter fullscreen mode Exit fullscreen mode

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>
    )
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (8)

Collapse
 
martinkr profile image
Martin Krause • Edited

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!

Collapse
 
aimeetacchi profile image
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

Collapse
 
coderpixel profile image
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.

Collapse
 
code_rabbi profile image
Emeka Orji

Amazing Explanation!!👍👍

Collapse
 
ryanmambou profile image
Ryan-Mambou

Excellent article man. Thanks a lot!

Collapse
 
shuvoskywalkar profile image
Shuvo Koiri

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

Collapse
 
ohidulislam profile image
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
  }
}```

Enter fullscreen mode Exit fullscreen mode
Collapse
 
supermod profile image
Stelios Papoutsakis

good one.

can we use both in a next.js project?