페이지별 렌더링 전략 재배분

문제

거의 모든 페이지가 getInitialProps를 통해 SSR로 동작하고 있었습니다. 캐시로 충분한 페이지까지 매 요청 서버가 새로 그렸고, 첫 로딩 때 내려받는 번들도 컸습니다.

기준 하나로 재배분

"이 페이지가 원하는 게 캐시 속도인가, 데이터 신선도인가"를 기준으로 전체 32개 페이지를 다시 나눴습니다.

그중 SSR이 필요 없는 페이지가 23개였습니다. 소개 페이지처럼 모든 사용자에게 같은 정적 콘텐츠를 보여 주는 페이지, 그리고 화면의 뼈대는 정적이고 사용자 데이터만 클라이언트에서 가져와도 충분한 페이지들입니다. 이 페이지들에서 SSR을 걷어내 Next.js의 Automatic Static Optimization이 동작하게 했습니다. 서버는 데이터 조회를 기다리지 않고 미리 빌드된 정적 파일을 바로 내려주게 되어, 서버 부하와 첫 응답 시간(TTFB)이 줄었습니다. 나머지 페이지도 성격에 따라 ISR·SSR·CSR 중 하나로 정리했습니다.

지금 보이지 않는 건 나중에

같은 기준을 컴포넌트에도 적용했습니다. "사용자가 지금 당장 보는가?"를 묻고, 버튼을 눌러야 열리는 모달이나 다른 탭 뒤에 숨은 패널처럼 첫 상호작용에 필요 없는 UI는 dynamic import로 뒤로 미뤘습니다. 가장 무거웠던 /setting 페이지 번들이 403kB(37.0%) 줄었고, 전체 페이지 평균 번들은 16.7% 줄었습니다.

코드를 나누면 늦게 도착한 조각이 스타일 없이 잠깐 드러나거나 레이아웃이 흔들릴 수 있습니다. 그래서 로딩 중에는 스켈레톤 UI로 자리를 잡아 두었습니다.

메인은 되돌렸지만, 원인은 다른 곳에 있었다

메인은 처음 판단이 틀렸던 페이지입니다.

메인에 ISR을 적용하자 일부 사용자에게 옛 화면이 계속 보였습니다. 메인은 광고가 HTML에 함께 구워지는 페이지라, 옛 화면은 곧 이미 내려간 광고의 노출이었습니다. 처음에는 서버 인스턴스마다 캐시가 따로 남는 문제로 보고 SSR로 되돌렸지만, 해결되지 않았습니다.

그래서 서버, CDN 캐시, 서비스 워커, 앱 코드를 차례로 배제하고 실기기에서 추적했습니다. adb와 Chrome DevTools Protocol로 앱을 처음 켤 때의 문서 응답을 캡처하니, 문서는 네트워크가 아니라 폰의 디스크 캐시에서 나오고 있었습니다(fromDiskCache=true). 응답 헤더에는 코드에 없는 max-age=31622400이 붙어 있었습니다.

원인은 제 실수였습니다. ISR일 때도, SSR로 되돌린 뒤 붙인 CDN 캐시 헤더(public, s-maxage=60, stale-while-revalidate=300)에서도 제가 브라우저용 max-age를 비워 뒀습니다. Cloud CDN의 client TTL(366일)이 그 빈칸을 채웠고, 폰 브라우저는 옛 메인 HTML을 1년짜리 신선한 사본으로 보관하고 있었습니다. 렌더링 방식을 바꿔도 빈칸은 그대로였으니, SSR로 되돌려도 해결되지 않았던 것입니다.

일부 사용자만 겪은 데도 이유가 있었습니다.

• 로그인 쿠키가 없을 때만 public으로 응답했습니다. 첫 설치, 로그아웃, 쿠키 만료 후의 첫 실행이 여기에 해당합니다.
• Android 앱(TWA)은 매번 같은 URL로 열리고 새로고침 수단이 없습니다. 브라우저는 새로고침 한 번이면 빠져나오지만 앱은 그럴 수 없어, 옛 문서의 대부분이 앱에서 나왔습니다.

처방은 코드 쪽에 두기로 했습니다.

• Cache-Control을 만드는 헬퍼 하나로 통일해 max-age=0을 빠뜨릴 수 없게 하고, public인데 max-age가 없는 값이 생기면 실패하는 CI 검사를 둡니다.
• 이미 오염된 기기는, 캐시를 우회하는 URL로 도착한 새 문서가 원래 URL을 fetch(..., { cache: 'reload' })로 한 번 다시 받아 그 항목만 덮어씁니다.
• 캐시 전체를 지우는 Clear-Site-Data와 CDN 설정 변경은 하지 않습니다. client TTL 366일은 해시가 붙은 정적 파일에는 맞는 값이기 때문입니다.

같은 처방을 다른 페이지에도 적용하는 중입니다. 팀 규칙도 하나 생겼습니다. SSR 페이지를 CDN에 태울 때 s-maxage와 max-age=0은 반드시 짝으로 둡니다.