발생 경위

사용자 권한에 따른 조건부 페이지 렌더링을 Parallel Routes를 이용하여 하던 도중, 불필요하게 렌더링이 되는 이슈가 발생하였다.

솔루션

사실 정확한 해결 방법은 찾지 못했다.

@admin 페이지 컴포넌트(@admin/page.tsx)에 클라이언트 컴포넌트가 일부 존재했는 데, 그 중 하나의 클라이언트 컴포넌트가 컴포넌트 내에서 useEffect hook을 이용하여 데이터를 페칭하고 있었다.
그래서 그 컴포넌트를 페이지 컴포넌트에서 지워봤더니, 위 현상이 사라지긴 했다.

하지만 이 현상을 해결하기 위한 근본적인 해결방법도 아닐 뿐더러, 병렬 라우트 폴더 내에 존재하는 다른 라우트에서도 위 현상이 발생하는 걸 확인할 수 있었다.

Next.js GitHub 레포지토리에 관련 이슈가 있어 찾아본 결과, 다른 사람들도 이런 현상이 발견된 걸 보아 Next.js의 버그인 것 같다. (2023년 7월 이슈.. 현재 진행중)
그래서 불필요하게 스크립트를 불러오는 현상을 고치는 대신에, 그냥 page 컴포넌트 내에서 권한을 한번 더 확인하여 특정 권한이 아니라면 렌더링을 멈추는 로직을 추가하였다.

/* app/@admin/page.tsx */
export default async function Page() {
  const role = await getRole()
  if (role !== "ADMIN") return null;
  
  console.log("rendered admin");
  
  return <>...</>
}

/* app/@club/page.tsx */
export default async function Page() {
  const role = await getRole()
  if (role !== "CLUB") return null;
  
  console.log("rendered club");
              
  return <>...</>
}

References

https://github.com/vercel/next.js/issues/53292 https://github.com/vercel/next.js/issues/53292#issuecomment-1679257585