Link 태그 prefetch (nextjs, middleware, supabase)

1. 문제 상황

supabase 미들웨어를 사용해서 로그인 여부에 따라 유저의 접근을 제한하고자 했습니다.

import { NextResponse, type NextRequest } from "next/server"
import { createServerClient } from "@supabase/ssr"

const loggedInOnlyPathsRegex = /(my-challenge|my-page|create|update|import)/

export async function updateSession(request: NextRequest) {
  const supabaseResponse = NextResponse.next({
    request,
  })
  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) => {
            request.cookies.set(name, value)
            supabaseResponse.cookies.set(name, value, options)
          })
        },
      },
    }
  )

  // 여기
  const { data, error } = await supabase.auth.getUser()
  if (data.user && new URL(request.url).pathname === "/auth/login-email") {
    return NextResponse.redirect(new URL("/", request.url))
  }
  if (!data.user && loggedInOnlyPathsRegex.test(request.url)) {
    return NextResponse.redirect(new URL("/auth/login-email", request.url))
  }

  return supabaseResponse
}

위의 코드는 공식문서를 아주 살짝 변형한 문서로 // 여기 주석부분만 봐주시면 됩니다.

위의 코드에서 로그인이 되어 있지 않을때 loggedInOnlyPathsRegex.test(request.url) 정규식 검사로 접근을 확인한다면 redirect를 통해서 로그인 페이지로 돌려버리는 코드를 작성했습니다.

문제는 로그인을 한 직후에 접근 제한을 설정해둔 url에 들어가면 마치 로그인이 되지 않은 것처럼 행동했습니다.

2. 해결 과정

테스트를 하던 중에 url을 직접 작성해서 들어가면 문제가 없는데 Link 태그를 사용한 부분만 접근이 문제가 생긴다는 사실을 발견했습니다.

1. url 직접 접근 문제 없음
2. onClick router.push 해도 문제 없음
3. Link 태그로 접속하면 redirect 처리가 됨

다음 사진은 로그인 직후 접근시 네트워크와 미들웨어 로그를 캡처한 이미지입니다.

위에 Link 태그가 가리키고 있는 고정 url들이 로그인이 안된 상태에서 접근이 되고 있고 리다리엑트가 걸린 로그들을 볼 수 있습니다.

공식문서에서 prefetch와 데이터 캐싱에 대해서 찾아봤습니다.

위의 사진에서는 정적 경로에서는 전체 경로가 사전 페치됨을 알려주고 있습니다.
다음 사진은 데이터 캐싱타임과 관련된 이미지입니다.

위의 문서에서는 기본 캐싱 타임이 5분이라고 설명하고 있습니다.

저는 정말 혹시나 해서 5분을 재고 들어갔더니 정상적으로 접속이 가능했습니다...

3. 해결 방법

현재 해결한 방법으로는 Link 태그의 prefetch 프로퍼티의 설정을 false로 바꾸는 것입니다.

다른 방법은 아직까지도 찾고 있습니다.

혹시 이후에 해결 방법을 찾게 된다면 이어서 글을 작성하겠습니다.

긴글 읽어주셔서 감사합니다!

https://supabase.com/docs/guides/auth/server-side/nextjs
https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching
https://nextjs.org/docs/app/api-reference/components/link#prefetch
https://nextjs.org/docs/app/building-your-application/caching#invalidation-1