Gatsby SSR for dynamic website metadata not working

I've been following the Gatsby Tutorial on how to implement SSR in a gatsby site according to this article. This link suggests that I add export async function getServerData() {...} function in my page and serverData as a prop. This tutorial suggests that doing so will result in Gatsby using SSR for my site and I'll be able to retreive any data before page is loaded.

However, this is not the case, after following the exact tutorial, I don't get any dog images and I get an error saying serverData is undefined

My SSR code looks like this

import * as React from "react"

const SSRPage = ({ serverData }) => (
  <main>
    <h1>SSR Page with Dogs</h1>
    <img alt="Happy dog" src={serverData.message} />
  </main>
)

export default SSRPage

export async function getServerData() {
  try {
    const res = await fetch(`https://dog.ceo/api/breeds/image/random`)
    if (!res.ok) {
      throw new Error(`Response failed`)
    }
    return {
      props: await res.json(),
    }
  } catch (error) {
    return {
      status: 500,
      headers: {},
      props: {}
    }
  }
}

I'm not sure what I'm doing wrong. I have tried running my site with gatsby build && gatsby serve as well as with just gatsby serve but it doesn't seem to work.