Is middleware an appropriate place to be refreshing JWT token cookies from external backend API?

[tyaan]

I just want all my server components that require login to start with a validation check with JWT token cookies, and redirect to login page is validation fails. When refresh is required, the server component needs to make a request to my Python Django back end with the refresh token cookie, receive the new access token in response and then attach that new access token cookie to the response to the browser along with the page content. But... there's no way to set response headers in a server component? I can't find a good way to get that new refreshed access token cookie back to the browser.

It looks like in page router you could edit a server component response headers in getServerSideProps, but there's no equivalent in app router. I've seen a few people recommending middleware, but the next.js docs state very clearly that it's not a good fit for session management (but it doesn't say why??).

Here's my implementation in middleware.ts that is working in development, but I'm worried that in production, the requests to my Django backend will be too slow for middleware. I'm also worried just because the docs literally state that middleware is not good for session management. Will this work fine, or is this a bad use of middleware? Is there a better way to do this?

import { NextRequest, NextResponse } from 'next/server'
import { cookies } from 'next/headers'

export async function middleware(req: NextRequest) {
  const url = req.nextUrl

  const loginPaths = ['/login', '/register']
  const isLogin = loginPaths.includes(url.pathname)

  const cookieStore = await cookies()
  const access = cookieStore.get("access")?.value
  const refresh = cookieStore.get("refresh")?.value

  if(access){
    const accessRes = await fetch(`${process.env.DJANGO_API_ROOT}/api/users/token/verify/`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token: access }),
    })

    if(accessRes.ok){
      if(isLogin){
        return NextResponse.redirect(new URL('/', req.url))
      }
      else{
        return NextResponse.next()
      }
    }
  }
  
  if(refresh){
    const refreshRes = await fetch(`${process.env.DJANGO_API_ROOT}/api/users/token/refresh/`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ refresh: refresh }),
    })
    
    if(refreshRes.ok){
      const newTokens = await refreshRes.json()

      cookieStore.set({
        name: "access",
        value: newTokens.access,
        httpOnly: true,
        path: "/",
        maxAge: 60 * 5,
      })

      cookieStore.set({
        name: "refresh",
        value: newTokens.refresh,
        httpOnly: true,
        path: "/",
        maxAge: 60 * 60 * 24,
      })

      if(isLogin){
        return NextResponse.redirect(new URL('/', req.url))
      }
      else{
        return NextResponse.next()
      }
    }
  }

  if (isLogin) {
    return NextResponse.next()
  }
  else{
    return NextResponse.redirect(new URL('/login', req.url))
  }
}

export const config = {
  matcher: ['/((?!api|_next|favicon.ico).*)'],
}