Server-side Rendering in NextJS

Just how useful is server side rendering in NextJS?

If a page uses Server-side Rendering, the page HTML is generated on each request. To use Server-side Rendering for a page, you need to export an async function called getServerSideProps. The server will call this function on every request.

For example.

Suppose your page needs to pre-render frequently updated data (fetched from an external API). You can write getServerSideProps which fetches this data and passes it to Page 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/v2`)
  const data = await res.json()

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

Tada!

the getServerSideProps is run on every request instead of on build time.