사이드바 대화 목록 초기 로딩 성능 저하: 하이드레이션 문제 해결

사이드바 대화 목록이 처음 뜰 때 너무 느려서 답답했던 경험, 다들 있으시죠? 특히 헤비 유저가 앱에 처음 딱 들어왔을 때, 이 로딩 속도가 바로 첫인상이 되는데 말이죠. 오늘은 이 사이드바 대화 목록 초기 로딩 성능을 잡아낸 이야기를 해볼까 합니다.

시도와 함정

처음에는 단순히 사이드바에 표시되는 대화 목록의 개수를 줄여보자고 생각했어요. 그래서 초기에는 25개만 보여주고, 나머지는 '더 보기' 버튼을 눌렀을 때 로드되도록 로직을 변경했죠.

// 초기 대화 목록 렌더링 로직 (간략화)
const initialConversations = conversations.slice(0, 25);
// ... initialConversations를 사용하여 UI 렌더링

분명 데이터 양은 줄었는데, 이상하게도 하이드레이션(hydration) 과정에서 여전히 버벅이는 느낌이 들었어요. 렌더링 자체는 빨라진 것 같은데, 사용자가 뭔가 인터랙션을 하려고 하면 딜레이가 느껴지는 거죠.

// 실제 에러 메시지는 아니지만, 당시 느꼈던 증상
// "Uncaught Error: Hydration failed because the initial UI does not match the server-rendered UI."
// 또는 단순히 UI 반응이 느린 현상

분명 데이터를 줄였는데 왜 이럴까 싶어서 한참을 들여다봤습니다. 혹시 컴포넌트 내부에서 불필요한 연산이 계속 돌고 있는 건 아닌지, 아니면 다른 라이브러리와 충돌이라도 나는 건 아닌지 추측만 무성했죠. 3시간 정도 삽질 끝에 겨우 원인을 찾았습니다.

원인

문제는 초기 로딩 시 로드되는 데이터 양을 줄이는 것만으로는 부족했다는 점이었어요. 제가 간과했던 것은, 줄어든 데이터라도 그 데이터에 포함된 모든 정보(예: 마지막 메시지 내용, 읽음 상태 등)를 초기 렌더링 시점에 미리 다 계산하고 준비하려고 했다는 점입니다. 즉, 데이터 자체는 적어졌지만, 그 데이터를 처리하는 데 드는 연산량이 여전히 많았던 거죠. 하이드레이션 과정에서 이 모든 연산을 한 번에 하려니 병목 현상이 발생했던 겁니다.

해결

결국 해결책은 더 단순했습니다. 초기 로딩 시에는 정말 최소한의 정보만 로드하고, 나머지 상세 정보는 사용자가 해당 대화를 클릭하거나 스크롤을 내렸을 때 동적으로 로드하도록 변경했습니다.

// 개선된 초기 대화 목록 렌더링 로직 (간략화)
const initialConversations = conversations.slice(0, 25).map(conv => ({
  id: conv.id,
  name: conv.name,
  // 마지막 메시지 내용, 읽음 상태 등 상세 정보는 여기서 로드하지 않음
}));
// 사용자가 특정 대화를 클릭하거나 스크롤 시 상세 정보 로드
function loadConversationDetails(conversationId) {
// API 호출 등으로 상세 정보 로드
// ...
}

이렇게 하니 초기 렌더링 시에는 정말 필요한 ID와 이름 정도만 메모리에 올리게 되면서, 하이드레이션 과정이 훨씬 가벼워졌습니다.

결과

• 헤비 유저의 애플리케이션 첫 진입 경험이 눈에 띄게 개선되었습니다.
• 페이지 로딩 속도가 체감될 정도로 빨라졌고, UI 반응성이 훨씬 향상되었습니다.
• 기존에는 로딩 중에 깜빡임이나 멈춤 현상이 있었는데, 이런 현상이 거의 사라졌습니다.

정리 — 같은 함정 안 빠지려면

• [ ] 사이드바나 목록처럼 데이터가 많은 컴포넌트는 초기 로딩 시 최소한의 정보만 로드하도록 설계합니다.
• [ ] 마지막 메시지 내용, 읽음 상태 같은 상세 정보는 사용자의 인터랙션(클릭, 스크롤 등)에 따라 동적으로 로드하는 방식을 고려합니다.
• [ ] 데이터 양을 줄이는 것 외에, 각 데이터 항목을 처리하는 연산량도 초기 렌더링 성능에 영향을 미친다는 점을 기억합니다.
• [ ] 하이드레이션 오류나 UI 반응성 저하가 발생하면, 단순히 데이터 양뿐만 아니라 컴포넌트 내부의 연산 로직도 함께 점검합니다.