Edward's Blog
NextJS Static Site Generation and Server Side Rendering.

NextJS Static Site Generation and Server Side Rendering.

Edward Ha's photo
Edward Ha
·

3 min read

When it comes to NextJS there are 4 main rendering method: Client Side rendering (CSR), Server side rendering (SSR), Static Site Generation (SSG) and Incremental Static Regeneration (ISR).

So many methods you need to know before mastery NextJS and each rendering method has its own props and cons. So today we going to discovery 2 most popular methods is Server side Rendering and Static site Generation.

Static Side Generation (SSG)

If a page uses Static Site Generation, the page HTML is generated in build time. That means in production, the page HTML is generated when you run next build. This HTML will then be reused on each request. It can be cached by a CDN (Content Delivery Network)

How does it work?

If you want to use SSG in your Next.js application, all you need to do is export a function called getStaticProps from the page you want to use SSG on.

Then Next.js sees this function exported it know to generate that page using SSG when building the website.

That is scenarios when your page content depends on external data (maybe need to fetch the list data from a CMS - Content Management System) and with a scenarios when your page paths depend on external data like dynamic routes, in that case you can use getStaticPaths alongside with getStaticProps, this allow Next.js to also pre-render all the path as well. Here are the examples:

export async function getStaticPaths() {
  return {
        // The paths to be pre-rendered at build time. E.g. /post/1, /post/2, etc
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
  }
}

export async function getStaticProps(context) {
  return {
        // This props object will be passed to the page so they can be used on the frontend.
    props: {},
  }
}

When should you use Static Generation?

One of the biggest props when using Static site generation is it makes the website much faster than server side rendering, static site generation are always online once they’re generated and distributed to a CDN, your backend server doesn’t need to be available all the time for the page to function.

You can use for some cases like:

  • Markting pages

  • Blog posts and portfolio

  • E-commerce product listings

  • Help and documentation

But in the other hand, Static Site Generation is not a good idea for your page when you update data frequently because it cannot change content without the site being rebuilt and redeployed entirely.

Server-side rendering (SSR)

SSR is similar to SSG in the sense that pages are generated on a server but the key different is when the rendering happens. With SSR, pages are rendered at request time and for every request.

How does it work?

To use Server-site Rendering for page, you need to export an async function called getServerSiteProps. The function will called by the server on every request.

For example like you need to update data frequently, you can write getServerSiteProps like below

export default function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

SSR is similar to SSG but when compare it to SSG, it suitable for some case like when your website need to display the latest data.

My experience when using SSR and SSG

Both SSG and SSR are great rendering methods and have their own props and cons that make them suitable for different scenarios in Next.js application. They have similarities but also have different purpose. Generally I suggest, when possible look to use SSG but if that’s not possible for some reason then use SSR depend on you purpose.

Next.jstechnologyReact