Gatsby SSR pages are not being rendered

I have built a static website to test some features for our project. it utilizes the server-side rendering capabilities of Gatsby. the webpage can be visited at: https://victorious-water-092f0620f.1.azurestaticapps.net/ssr -- note that it will return 404. the page actually renders properly on the local dev as well as on Gatsby Cloud: https://gatsby07main.gatsbyjs.io/ssr. both sites are built from the same source

To reproduce this issue,
1. create ([here's a sample project](https://github.com/gatsbyjs/tutorial-example)) or use an existing Gatsby project
1. build a separate gatsby page in the project (or on any page for that matter) following the information here: [Using Server-side Rendering (SSR)](https://www.gatsbyjs.com/docs/how-to/rendering-options/using-server-side-rendering/).
2. run `npm run develop` and visit the site. the images will be displayed after the url is retrieved from the back end.
3. using the browser, one can observe that the `/random` call isn't visible to the browser as it's executed on the back end.
4. deploy this site to Azure Static Web App per instructions here: [Create and publish a static web app with Gatsby and Azure Static Web Apps](https://docs.microsoft.com/en-us/learn/modules/create-deploy-static-webapp-gatsby-app-service/)
5. visit the page with the server side rendered components. the page should return the desired image, but it will be displayed as not found (404).

**Device info (if applicable):**
- OS: Windows 10
- Browser: Firefox, Edge, Chrome