Server first
SEO, 권한, 첫 화면에 필요한 데이터는 서버 컴포넌트에서 먼저 준비한다.
client fetch
초기 HTML과 이후 최신성을 나눈다
클라이언트 페칭은 상호작용 후 데이터에는 강하지만 첫 화면, 로딩, 오류 복구는 직접 설계해야 합니다.
Client refresh
버튼, 필터, 실시간 갱신처럼 사용자 상호작용 뒤의 최신성을 맡긴다.
useEffectSWR 또는 Query
UI states
로딩, 빈 결과, 오류, 재시도 상태가 같은 공간 안에서 안정적으로 바뀌게 한다.
fallbackretry
| 데이터 성격 | 추천 위치 | 확인할 위험 |
|---|---|---|
| SEO와 첫 페인트에 중요 | 서버 컴포넌트 fetch | 클라이언트만 쓰면 초기 HTML이 빈 상태가 된다. |
| 로그인 후 개인화가 강함 | 서버에서 인증 확인 후 필요한 섬만 클라이언트 | 토큰이나 권한 로직이 브라우저로 새지 않게 한다. |
| 검색, 필터, 실시간 갱신 | 클라이언트 데이터 라이브러리 | 중복 요청, 흔들리는 loading 상태, 실패 복구를 설계한다. |
서버 결과를 넘겨 첫 화면과 클라이언트 갱신 사이의 단절을 줄인다.
사용자 행동 뒤에만 필요한 최신성은 클라이언트에서 갱신한다.
로딩과 오류가 레이아웃을 밀어내지 않도록 고정 공간을 둔다.