서버 컴포넌트 데이터 페칭

서버에서 끝낼 데이터 선택

초기 화면에 필요한 목록, 상세, 권한 정보는 서버에서 준비하면 로딩 깜빡임을 줄일 수 있다.

항상 최신인지, 일정 시간 재사용 가능한지, 수동 무효화할지 fetch 옵션과 route 설정으로 표현한다.

서로 독립인 데이터는 await를 연달아 쓰기보다 Promise.all로 waterfall을 줄인다.

no-store

요청마다 최신 개인화나 자주 바뀌는 값에 맞지만 캐시 이점을 포기한다.

남용하면 느려진다.

revalidate

시간 기반 갱신 일정 시간 동안 재사용하고 이후 갱신한다.

오래된 정보 허용 범위와 맞춘다.

tag

의미 기반 무효화 mutation 이후 관련 데이터만 다시 검증하는 데 유용하다.

태그 이름 체계를 정한다.

parallel

대기 시간 절감 독립 fetch는 병렬로 시작해 전체 대기를 줄인다.

의존 데이터는 순차가 맞다.

비밀 브라우저에 노출되면 안 되는 토큰이 서버 경계 안에 남아 있는가.

신선도 데이터가 얼마나 오래 낡아도 되는지 정책이 명시되어 있는가.

waterfall 독립 요청을 불필요하게 순차 await하고 있지 않은가.

const userPromise = getUser();
const postsPromise = getPosts();
const [user, posts] = await Promise.all([userPromise, postsPromise]);