웰로 · Wello · 2025.12
지역을 먼저 기다리지 않는 지역소식
지역소식 섹션의 지역 조회·로딩 구조 개선
홈·커뮤니티 지역소식 섹션의 지역 조회 방식과 로딩 구조를 바꿨습니다.
- 문제
- 서버 컴포넌트가 getServerRegion()으로 지역을 먼저 조회해, 이 API가 느리거나 실패하면 섹션 전체가 렌더링되지 않았고 지역 파라미터가 빠진 요청이 revalidate=60 캐시를 거쳐 사용자 지역과 무관한 소식이 보일 수 있었습니다.
- 결정
- 클라이언트 컴포넌트로 전환해 로그인 상태 저장소의 지역 값을 읽고, 빠져 있던 지역 파라미터를 요청에 추가해 useSuspenseQuery로 가져오게 했습니다.
- 결과
- 지역 조회 API가 지연돼도 섹션 렌더링이 막히지 않게 되었고, 요청에 사용자 지역이 반영되어 지역에 맞는 소식이 표시되게 했습니다.
결과 근거: 이력서 기재 내용. 이 페이지에서 측정한 값이 아닙니다.
구조
- 지역소식 섹션 · 임시·화면 계산
- 저장소의 codeRegion·codeSubRegion · 확정
지역 값. 지역은 로그인 상태 저장소의 codeRegion·codeSubRegion에서 바로 읽습니다.
범례
- 임시·화면 계산
- 확정
- 문제 발생
- 대기
- 복구
지역소식은 사용자 지역에 따라 달라지는 화면이라 공개 캡처가 없어 구조를 다시 그린 도식입니다. 실제 화면이 아닙니다.
판단
지역 값을 어디에서 가져올 것인가
로그인 상태 저장소의 codeRegion·codeSubRegion에서 바로 읽기
getServerRegion 조회를 없애고, 이미 가진 지역 값으로 지역소식 조회를 바로 시작합니다.
선택하지 않음 · 서버에서 getServerRegion()으로 조회 — 이 API가 느리거나 실패하면 지역소식 섹션 전체가 렌더링되지 않았습니다.
사용자 지역을 조회 요청에 어떻게 반영할 것인가
조회 요청에 code_region·code_sub_region 추가
요청에 사용자 지역이 반영되어 지역에 맞는 소식이 표시됩니다.
선택하지 않음 · revalidate=60 캐시에 맡기기 — 지역 파라미터가 빠진 요청이 revalidate=60 캐시를 거쳐 사용자 지역과 무관한 소식이 보일 수 있었습니다.
문제와 해결
문제
지역소식 섹션이 getServerRegion() 조회를 기다리는 서버 컴포넌트였고, 이 API가 느리거나 실패하면 섹션 전체가 렌더링되지 않았습니다.
해결
클라이언트 컴포넌트로 전환하고 useSuspenseQuery로 조회하되, 로딩 중에는 Skeleton UI를 보여 줬습니다. 빠져 있던 code_region·code_sub_region도 요청에 추가했습니다.
이력서 원문
서버에서 지역을 먼저 조회하던 지역소식 섹션을 클라이언트 렌더링으로 바꿔, 지역 조회 API의 지연·실패가 섹션 전체를 막던 문제를 없애고 빠져 있던 지역 값을 요청에 반영했습니다.
문제
홈·커뮤니티의 지역소식 섹션은 서버에서 사용자 지역을 먼저 조회해야 화면이 그려졌습니다. 이 지역 조회 API가 느리거나 실패하면 섹션 전체가 렌더링되지 않았고, 요청에 사용자 지역이 빠진 채 60초 캐시를 거쳐 사용자 지역과 무관한 소식이 보일 수 있었습니다.
기여
서버 렌더링을 클라이언트 렌더링으로 전환하고 지역 조회 API 호출을 없애, 지역은 로그인 상태에 이미 있는 값을 바로 쓰게 했습니다. 빠져 있던 지역 값을 소식 조회 요청에 추가하고, 로딩 중에는 스켈레톤 UI를 보여 주도록 했습니다.
결과
지역 조회 API가 지연돼도 섹션 렌더링이 막히지 않게 되었고, 요청에 사용자 지역이 반영되어 지역에 맞는 소식이 표시되게 했습니다.