인프런 커뮤니티 질문&답변

강의를 듣다가 궁금한 점이 생겨서 질문드립니다.

브라우저에서 실행되는 코드에서는 브라우저 클라이언트를 사용하고, 서버에서 실행되는 코드에서는 서버 클라이언트를 사용합니다. - [Creating a Supabase client for SSR](https://supabase.com/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=nextjs&queryGroups=environment&environment=client#create-a-client)

@supabase/ssr 라이브러리를 사용해서 2가지 유형의 클라이언트를 생성합니다.

• 클라이언트 컴포넌트 클라이언트(createBrowerClient) - 브라우저에서 실행되는 클라이언트 컴포넌트에서 Supabase에 접근

• 서버 컴포넌트 클라이언트(createServerClient) - 서버에서만 실행되는 서버 컴포넌트, 서버 액션 및 라우트 핸들러에서 Supabase에 접근

   

서버 컴포넌트로 동작하는 page 컴포넌트에서 각 클라이언트를 사용해 번갈아 API 호출을 해봤는데 동일하게 작동하는 것 같았습니다. 서버 컴포넌트에서 Supabase의 클라이언트/서버 클라이언트가 동작하는 방식의 차이가 있는지, 렌더링 방식에 차이가 있는지 궁금합니다. 서버와 클라이언트 개념과 렌더링 방식(SSR, CSR)이 자꾸 혼동되어 헷갈리네요..

import { getTodos as getTodosClient } from '@/apis/todos';
import { getTodos as getTodosServer } from '@/actions/todos';

export default async function page() {
  const todos = await getTodos...();
} 

// todos.ts
import { createBrowserSideClient } from "@/lib/client/supabase";

export const getTodos = async() => {
  const supabase = await createBrowserSideClient();
  const result = await supabase.from("todos").select("*");
  
  return result.data;
}

// todos.action.ts
import { createServerSideClient } from "@/lib/server/supabase";

export const getTodos = async() => {
  const supabase = await createServerSideClient();
  const result = await supabase.from("todos").select("*");
  
  return result.data;
}