가이드의 미방문 RSC 요청과 공통 탐색의 사전 로드 변경

문제와 원인

공개 가이드 /guides/sqld의 첫 방문에서 누르지 않은 /, /privacy, /about, /guides의 RSC가 4개 요청됐다. 모바일 Lighthouse 3회에서 합계 전송량은 17,223–17,240B였다. header/footer의 보조 탐색까지 기본 next/link로 렌더해, 화면에 노출된 경로를 사전 로드하는 구조였다.

수정 전 코드

PublicContentShell

<nav className={styles.navigation} aria-label="공개 정보">
  <Link href="/guides">학습 가이드</Link>
  <Link href="/about">서비스 소개</Link>
  <Link href="/privacy">개인정보처리방침</Link>
  <Link className={styles.learningLink} href="/">학습 시작</Link>
</nav>

수정 후 코드

PublicContentShell · V7SiteFooter

V7 분기에서 V7SiteHeader와 V7SiteFooter를 렌더하고, 공통 탐색 링크를 native <a>로 바꿨다. 디자인 설정은 active: "study-blue", revision: 7이다.

<V7SiteHeader />
{!isV7Design() && <header className={styles.siteHeader} data-public-header>
  {/* 기존 classic Link 탐색 */}
</header>}
{isV7Design() ? <V7SiteFooter /> : <footer className={styles.footer}>
  {/* 기존 classic Link 탐색 */}
</footer>}

// V7SiteFooter
<nav aria-label="하단 메뉴">
  <a href="/guides">학습 가이드</a>
  <a href="/about">서비스 소개</a>
  <a href="/development-log">개발일지</a>
  <a href="/privacy">개인정보처리방침</a>
</nav>

classic 분기의 Link 9개와 가이드 본문의 이론·다음 학습 링크는 framework 사전 로드 정책을 유지한다.

검증 결과

최초 로드의 RSC 전송량

보관된 Lighthouse 모바일 cold 실행 3개를 사용했다. 화면은 412×823px, 저장소 초기화 조건이며, network-requests에서 resourceType=Fetch와 ?_rsc=를 만족하는 요청의 transferSize를 합산했다.

공통 탐색 DOM 비교

원본 PublicContentShell과 V7 header/footer 스냅샷을 React·Chrome, 1440×812px·DPR 1에서 조건별 1회 렌더했다. 본문·보조 컴포넌트는 합성 대역이며 Next Link 대역의 data-framework-link와 href를 집계했다. 수치는 숨겨진 모바일 메뉴까지 포함한 shell DOM의 링크 수다.