onSnapshot과 getDocs 차이 - firebase, firestore

onSnapshot

레퍼런스 내 모든 데이터를 실시간으로 가져온다.

🟩 장점

• 추가, 수정, 삭제 시 유저에게 바로바로 보여줄 수 있다.

🟨 단점

• 데이터를 알 수 없는 순서로 가져온다.
• 정렬, 제한(ex. 3개만 받아오기) 등 조건을 사용할 수 없다.

getDocs

레퍼런스 내 데이터를 조건에 맞게 한 번 가져온다.

🟩 장점

• 정렬, 제한 등 다양한 방식으로 데이터를 받아올 수 있다.

// firestore의 users 컬렉션
const userRef = collection(getfirestore(app), 'users') 
// 이름 순으로 <size> 만큼 데이터 받아오기
const userQuery = query(userRef, orderBy("name"), limit(USER_FETCH_SIZE));
const data = getDocs(userQuery);

🟨 단점

• 실시간으로 데이터를 받아올 수 없다.

보완 방법

1. onSnapshot을 쓰고, 받아온 docs의 특정 필드를 조건으로 sort()하여 가져온다.
   a. 가져온 documents의 name 필드를 이름순으로 정렬
2. getDos를 쓰고, 데이터베이스 변경 시 자동으로 새로고침 한다.

결론

나의 경우 유저 관리 시스템이므로 변경 즉시 유저에게 보여줘야 좋은 유저 경험이 생길 것 같다. 지금은 무한 스크롤 구현 때문에 getDocs를 사용했지만, 추후 onSnapshot으로 변경 해야겠다.