왜 useSession()이 프로덕션에 배포했을 때 Next.js에서 첫 로드에 정의되지 않을까 (그리고 내가 해결한 방법)

Source: Dev.to

문제

내 SaaS(Next.js 앱)를 프로덕션에 배포했을 때, 첫 페이지 로드에서 session이 undefined로 로그되었습니다. 새로고침(예: /dashboard) 후에는 세션이 정상적으로 나타났습니다:

{ user: { … }, expires: "…" }

이 현상은 로컬호스트에서는 절대 발생하지 않았고, 프로덕션에서만 나타났습니다. 문제는 인증 토큰과 관련된 것처럼 보였지만, 토큰 자체는 정상でした.

왜 발생하는가

useSession()은 비동기입니다. 초기 렌더링 시 React는 컴포넌트를 즉시 마운트하지만, useSession()은 백그라운드에서 세션을 가져오기 시작합니다. 첫 번째 렌더링 동안 세션 데이터가 아직 준비되지 않아 console.log(session)은 undefined를 출력하고, 훅의 status는 "loading"이 됩니다.

로컬호스트에서는 앱이 느리게 실행되어 세션 요청이 해결될 시간이 더 많이 주어져 로그를 보기도 전에 세션이 확보됩니다. 프로덕션에서는 앱이 더 빠르게 로드되므로 렌더링이 세션이 준비되기 전에 발생해 undefined 값이 드러납니다.

해결 방법

클라이언트에서 세션 상태 확인

import { useSession } from "next-auth/react";

const Component = () => {
  const { data: session, status } = useSession();

  if (status === "loading") {
    return null; // or a loading spinner
  }

  if (!session) {
    redirect("/login");
  }

  // render protected content
};

세션이 존재할 때까지 useEffect 보호

import { useEffect } from "react";

useEffect(() => {
  if (!session) return; // wait for session

  fetchBills(session.user.id);
}, [session]);

핵심 정리

• 렌더링은 비동기 데이터(useSession 등)가 준비되기 전에 발생하므로 초기 undefined 상태를 처리해야 합니다.
• 이 패턴은 모든 비동기 데이터 소스에 적용됩니다: API 호출, 데이터베이스 조회, React Query 등.
• 프로덕션 전용 버그는 종종 논리 오류가 아니라 타이밍 차이에서 비롯됩니다.

읽어주셔서 감사합니다. 도움이 되었다면 공유하거나 저와 연결해 주세요.

Athashri Keny