I have a server side rendering application (next.js) needs to be deployed to Vercel. And I’d like to deploy it to multiple regions. I understand that Vercel middleware is on edge and it can be used to forward the request to different url based on geolocation. I also set up a demo from this example:
https://github.com/vercel/examples/tree/main/edge-middleware/power-parity-pricing-strategies
There is a middleware
in this repo which detects user’ geolocation and rewrite the url based on country name:
export function middleware(req: NextRequest) {
// Get country
const country = req.geo.country?.toLowerCase() || 'us'
// Update pathname
req.nextUrl.pathname = `/edge/${country}`
// Rewrite to URL
return NextResponse.rewrite(req.nextUrl)
}
I think it works fine for client-side rendering or backend api. But when I look at the ssr.ts
file: https://github.com/vercel/examples/blob/main/edge-middleware/power-parity-pricing-strategies/pages/ssr.tsx
export const getServerSideProps: GetServerSideProps = async ({ req }) => {
// Get country
const country = String(
req.headers['x-vercel-ip-country'] || 'us'
).toLowerCase() as Country
// Get product for country
const product = await api.product.fetch({ country })
return {
props: {
country,
product,
},
}
}
it also uses geolocation from the request and call different api to fetch the data. It seems the SSR bypasses middleware. My question is if the ssr is also on edge. Do I need to use middleware or function in SSR application?