프론트엔드에서의 동시성 제어? promise 활용!(supabase auth 코드 까보기)
- 프론트엔드 동시성 제어는 여러 요청 발생 시 중복 처리를 막기 위해 첫 번째 요청의 결과를 나머지 요청들과 공유하는 패턴을 의미합니다. 🤝
- Next.js SSR 환경에서 Supabase
getSession 호출 시 429 Too Many Requests (Auth Rate Limit Exceeded) 에러가 발생하여 문제의식을 갖게 되었습니다. 🚫
getSession 함수는 accessToken이 유효하지 않을 경우 refreshToken을 사용하여 Supabase에 실제 리프레시 요청을 보내는 방식으로 동작합니다. 🔄
- 클라이언트(브라우저)는 요청 간 메모리 공유가 가능하지만, 서버는 Stateless 특성으로 인해 요청 간 메모리 공유가 어렵다는 환경적 차이가 있습니다. 🧠
- Supabase는 브라우저 클라이언트의
getSession에서 Deferred 클래스를 활용하여 동시성 제어를 구현, 첫 번째 리프레시 요청의 Promise를 저장하고 중복 요청 시 이를 공유하여 API 호출을 방지합니다. 🚀
Deferred 클래스는 Promise 객체를 캡슐화하여, 첫 요청이 처리 중일 때 동일한 Promise를 반환하고, 첫 요청 완료 시 resolve를 통해 결과를 모든 대기 중인 요청에 전달하는 방식으로 작동합니다. 🎁
- 서버 환경에서는 요청마다 새로운 상태를 생성하는 Stateless 특성 때문에
Deferred 인스턴스를 요청 간에 공유할 수 없어 동시성 제어가 어렵습니다. ☁️
- 따라서 브라우저 클라이언트에서
getSession을 호출하여 Supabase의 Deferred 기반 동시성 제어를 활용하는 것이 해결책이며, Deferred 패턴은 프론트엔드 중복 요청 처리의 유용한 베스트 프랙티스입니다. ✅
데브허브 | DEVHUB | 프론트엔드에서의 동시성 제어? promise 활용!(supabase auth 코드 까보기)