I have a gatsby app setup for SSR and it’s 404ing on the index page. There is a function configured at https://ssr-poc.pages.dev/geolookup that is successfully running and returning the response but the index route which hits that function is 404ing. It is returning the 404 page from the app itself, not a cloudflare generic one.
index.js code:
import * as React from "react"
export async function getServerData() {
try {
const res = await fetch(`https://ssr-poc.pages.dev/geolookup`)
if (!res.ok) {
throw new Error(`Response failed`)
}
return {
props: await res.json(),
}
} catch (error) {
return {
status: 500,
headers: {},
props: {}
}
}
}
const IndexPage = ({ serverData }) => (
<main>
<h1> Gatsby SSR with Geolocation POC</h1>
<p> Datacenter: {serverData.colo} </p>
<p> Country: {serverData.country} </p>
<p> City: {serverData.city} </p>
<p> Continent: {serverData.continent} </p>
<p> Latitude: {serverData.latitude} </p>
<p> Longitude: {serverData.longitude} </p>
<p> Postal Code: {serverData.postalCode} </p>
<p> Metro Code: {serverData.metroCode} </p>
<p> Region: {serverData.region} </p>
<p> Region Code: {serverData.regionCode} </p>
<p> Timezone: {serverData.timezone} </p>
</main>
)
export default IndexPage
export const Head = () => <title>Home Page</title>
function code:
export async function onRequest(context) {
const request = context.request;
const data = {
colo: request?.cf?.colo || 'NA',
country: request?.cf?.country || 'NA',
city: request?.cf?.city || 'NA',
continent: request?.cf?.continent || 'NA',
latitude: request?.cf?.latitude || 'NA',
longitude: request?.cf?.longitude || 'NA',
postalCode: request?.cf?.postalCode || 'NA',
metroCode: request?.cf?.metroCode || 'NA',
region: request?.cf?.region || 'NA',
regionCode: request?.cf?.regionCode || 'NA',
timezone: request?.cf?.timezone || 'NA'
};
return Response.json(data);
}