How does Vercel middleware work for SSR appplication?

  Kiến thức lập trình

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?

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT