Gatsby server side rendering with getServerData() working locally but not on Netlify - reactjs

Question

I have an example site built with Gatsby 4.25.0, Node 14.20.1 and React 18.1.0 and served on Netlify. There are two pages- /test.js and a dynamic page /dogs/[breed].js. The test page fetches a list of dog breeds from an API and renders them in a list of links:
// test.js
<ul>
{dogBreeds.map((breed, idx) => (
<li key={idx}>
<Link to={`/dogs/${breed}`}>{breed}</Link>
</li>
))}
</ul>
The [breed].js page uses getServerData() to fetch an image of the breed passed to it from params and display it on the page:
export async function getServerData(context) {
const { breed } = context.params
try {
const res = await fetch(`https://dog.ceo/api/breed/${breed}/images/random`)
const data = await res.json()
console.log(`data from the getServerData function: ${data}`)
if (!res.ok) {
throw new Error(`Response failed`)
}
return {
props: {
breed,
imageUrl: data.message,
},
}
} catch (error) {
return {
status: 200,
headers: {},
props: {},
}
}
}
Running locally, this all works fine. I can navigate to the dynamic route from the links and the images show up fine. On Netlify, hovering over the links in test.js causes 404 errors to show up in the console from "loader.js" and "prefetch.js":
And clicking a dog breed link on /test leads me to a 404. We are using gatsby-plugin-netlify and #netlify/plugin-gatsby.