쉬운 설명
Next.js와 Supabase는 요즘 개발 입문자분들이 정말 많이 사용하는 조합인데요. 사실 둘 다 흔히 아는 모습과는 살짝 다른 정체를 가지고 있어요. Next.js는 단순한 화면 구성 도구가 아니라, 화면과 서버 로직을 한 번에 처리하는 '올인원' 도구라고 보시면 돼요. 그리고 Supabase는 데이터베이스를 편하게 다루게 도와주는 서비스인데요. 여기에 프론트엔드(화면 코드)가 너무 직접 붙어 버리면, 나중에 문제가 생겼을 때 원인을 찾기가 꽤 까다로워질 수 있어요. 부엌(서버)과 손님 테이블(화면)을 명확히 나누지 않아서, 손님이 직접 냄비를 만지다 사고가 나는 상황을 떠올려 보시면 이해하기 쉬우실 거예요.
요약
이번 글의 원문은 Next.js와 Supabase를 함께 쓸 때 흔히 하는 오해 두 가지를 짚어 줍니다.
첫 번째는 'Next.js는 단순한 프론트엔드 프레임워크다'라는 생각이에요. 실제로는 서버와 클라이언트 코드를 모두 다루는 풀스택 프레임워크라는 점이 핵심이죠. React 18부터 도입된 RSC(React Server Component) 덕분에 이제 React 컴포넌트도 서버에서 실행되는 것이 기본 표준이 되었고요, 그 때문에 use client라는 다소 생소한 키워드가 등장하게 된 거랍니다.
두 번째는 Supabase에 관한 오해예요. 프론트엔드에서 Supabase SDK를 직접 호출하는 방식이 처음엔 편리해 보이지만, RLS(Row Level Security, 행 단위 접근 제어) 때문에 디버깅이 복잡해질 수 있어요. 게다가 데이터베이스 구조가 바뀌면 화면 쪽 코드까지 영향을 받는 '강한 결합' 문제도 생기죠.
이 내용이 중요한 이유는, 최근 AI를 활용한 '바이브 코딩'이 유행하면서 원리를 깊이 이해하지 않고 무작정 따라 쓰는 경우가 늘었기 때문이에요. 기본 개념을 제대로 알고 있어야 나중에 문제가 생겨도 AI나 동료에게 원인을 명확하게 설명하고 해결할 수 있답니다.
강의용 팁
강의를 준비하실 때는 먼저 'React 컴포넌트가 이제 서버에서도 실행된다'는 개념을 그림으로 풀어주시면 좋아요. 브라우저와 서버를 두 개의 상자로 그린 뒤, 기본 컴포넌트는 서버 상자 안에서 실행되고 use client가 붙은 것만 브라우저 상자로 넘어가는 흐름을 화이트보드에 보여주시면 수강생들이 훨씬 직관적으로 이해할 수 있습니다.
또한 Supabase 실습을 진행할 때는 프론트엔드에서 곧바로 Supabase SDK를 부르는 예제보다는, 간단한 서버 라우트(API 엔드포인트)를 거쳐 데이터베이스에 접근하는 구조를 보여주시는 걸 추천해요. RLS를 설명하실 때는 '데이터베이스 규칙으로 권한을 관리하는 방법'과 '애플리케이션 코드로 관리하는 방법(RBAC 테이블 등)'을 비교표로 정리해 주고, 디버깅 난이도 차이를 실습으로 직접 느끼게 해주시면 이해도가 훨씬 높아집니다.
주의 사항
이 글에서 다루는 내용은 특정 개발자의 개인적인 경험과 선호가 담긴 의견이 많이 섞여 있다는 점을 꼭 기억해 주세요. RLS나 Supabase SDK를 직접 호출하는 방식이 무조건 틀렸다는 의미는 아니에요. 프로젝트의 규모나 팀의 상황에 따라 충분히 유용할 수 있으니, '절대적인 정답'이라기보다는 '참고해 볼 만한 시각' 정도로 받아들이시는 것이 좋습니다.
아울러 Next.js, React, Supabase는 지금도 빠르게 발전하는 기술이기 때문에, 본문에서 설명한 RSC나 use client의 세부 동작이 버전에 따라 조금씩 달라질 수 있다는 점도 염두에 두시면 좋겠어요.
자체 검증
원문의 핵심 주장을 검토해 보면, "Next.js는 풀스택 프레임워크이며 기본적으로 서버에서 코드가 실행된다", "React 18부터 RSC가 도입되어 서버 렌더링이 표준이 되었다", "Supabase는 PostgREST 기반으로 REST API를 쉽게 쓰도록 돕는 SaaS다"라는 설명은 모두 원문 내용 및 대중적인 사실과 잘 부합합니다.
다만 "RLS로 인해 디버깅이 어렵다"라거나 "Next.js의 풀스택 구조 때문에 인지 혼란을 겪었다"는 대목은 작성자 개인의 경험과 의견이에요. 따라서 모든 개발자나 프로젝트에 동일하게 적용되는 절대적 사실로 보기는 어렵습니다. 원문에서도 작성자의 개인적 선호로 서술되어 있는 만큼, 이 글에서도 '의견'의 영역으로 구분하여 전달했습니다.
태그
#Nextjs #Supabase #풀스택 #RSC #RLS #웹개발 #AI교육 #바이브코딩
원문
https://blog.m1nsuppp.com/nextjs-supabase-misconceptions
참고자료
Next.js 공식 문서 - Server and Client Components
React 공식 문서 - Server Components