Supabase 클라이언트 비교: createClient vs createBrowserClient vs createServerClient

Nextjs를 활용해서 어플리케이션을 만들 때 유저 관리와 인증을 스스로 하는 방법도 있지만 요즘은 Supabase를 통해 많이 하는 것 같다. 처음에는 supabase를 통해 로그인을 구현할 때 server action을 통해서 구현하려고 했으나 클라이언트 쪽 로그인 유지를 위해서 createBrowserClient를 활용해서 구현했다.

Supabase에서 다양한 환경에 맞춰 클라이언트를 생성하는 방법에는 createClient, createBrowserClient,  createServerClient가 있다. 각각 뭐가 다른지 알아보겠다.

createClient

createClient는 브라우저와 서버 환경에서 범용적으로 사용되는 기본적인 클라이언트를 생성한다. 가장 기본적인 클라이언트 생성 함수이며 브라우저에서는 local storage 혹은 session storage에 인증 정보를 저장한다. 이미 인증이 된 상태라면 클라이언트를 생성할 때 인증 정보를 가져온다. 서버에서 사용할 때는 인증 정보를 넣어주어야 한다.

createBrowserClient

createClient를 통해 생성하는 클라이언트의 감싼 클래스이다. 자동으로 cookies를 통해 인증 정보를 자동으로 관리하여 로그인 상태를 유지할 수 있다는 점이 있다. 다만 API 키가 브라우저에 노출되므로 민감한 작업을 할 때는 주의가 필요하다. 주로 클라이언트에서 사용자의 로그인 상태를 유지해야 할 때 사용된다.

createServerClient

createServerClient는 서버 환경에서 사용되며, 주로 Server Actions, Middleware, API Routes에서 활용된다. 이 클라이언트는 쿠키 기반으로 자동으로 인증 토큰을 관리해 사용자의 세션을 유지하는 데 효과적이다. 서버에서 세션을 관리하기 때문에 보안이 강화된다는 장점이 있어, 서버 환경에서 인증된 사용자 정보를 편리하게 관리하고자 할 때 적합하다. nextjs의 미들웨어에서 사용하기도 한다.