문제 정의

// apps/layout.tsx
export default function layout({children}){
	// ..
	return (
		<SessionProvider>{children}</SessionProvider>
	)
}

layout.tsx에서 SessionProvider로 전체를 감싸면 위와 같은 에러가 발생한다.

사실 수집

1. SessionProvider는 뭐하는 컴포넌트일까?

1. 코드

   // next-auth/src/react.tsx
   export function SessionProvider(props: SessionProviderProps) {
     if (!SessionContext) {
       throw new Error("React Context is unavailable in Server Components")
     }
     // ..
     const value = {
   	  data : session,
   	  status : loading,
   	  async update(){ 
   		  //..
   	  },
     }
   	// ..
     return (
       <SessionContext.Provider value={value}>{children}</SessionContext.Provider>
     )
   }
   

   SessionProvider는 next-auth에서 제공해주는 컴포넌트로, 이름에서도 알 수 있듯이 Session과 관련된 값과 함수(data, status, update)를 뿌려주는 Context Provider이다.

원인 추론

Context Provider는 Client Component이다. Client Component인데 서버 컴포넌트인 layout.tsx에서 호출해서 발생한 에러이지 않을까 생각했다. 하지만, React에서도 사용 가능하다고 한 방식인 RCC안에 RSC를 감싼 건데? children으로 감싸는 것은 허용하기 때문이다.

해결 방안 수립

이전에 React Server Component를 공부하면서 읽었던 내용이 떠올랐다.

• Third-party packages

바로 아직 Client Component를 지원하지 않는 서드 파티 패키지를 사용하는 방법이다. ‘use client’를 선언한 파일을 만들어, import 후 export하는 것이다. 그럼, 이 파일은 기존에는 ‘use client’가 명시되지 않은 server component였지만, ‘use client’를 명시한 파일에서 export함으로써 client component가 된다.

조치 및 구현

// src/components/ClientSessionProvider.tsx
'use client';
import { SessionProvider } from 'next-auth/react';
export default SessionProvider;

// src/apps/layout.tsx
export default function layout({children}){
	// ..
	return (
		<ClientSessionProvider>{children}</ClientSessionProvider>
	)
}