그알것 — 그럼에도 알아야 할 것들
홈질문커뮤니티
로그인
그알것 — 그럼에도 알아야 할 것들

Service

  • 홈
  • 소개
  • 질문
  • 커뮤니티

My

  • 내 워크스페이스
  • 저장한 질문
  • 작성한 답변

Policy

  • 이용약관
  • 개인정보처리방침
  • 문의

© 2026 그알것 · What Still Matters

질문 목록Rendering
Rendering

PPR(Progressive Partial Rendering)이란 무엇인가요?

실무4/5
설계4/5
인간4/5
기초2/5

면접관의 질문 의도

PPR을 "빠른 렌더링 기법"으로 외웠는지, 아니면 정적/동적 경계 설계라는 _의사결정 문제_로 보는지를 가른다. Suspense·캐시·LCP까지 엮어 답하면 시스템적으로 본다고 판단한다.

큐레이션 답변

학습 자료

PPR은 한 라우트 안에서 정적으로 만들 수 있는 셸(레이아웃·헤더·플레이스홀더)을 빌드 타임에 미리 만들어 즉시 흘려보내고, 개인화나 요청 의존 영역은 서버 컴포넌트 스트리밍으로 뒤따라 채우는 렌더링 전략이다. 핵심은 "정적/동적을 페이지 단위가 아니라 영역 단위로 가른다"는 점이고, Suspense 경계와 결합해 동적 영역이 풀릴 때까지 셸과 폴백이 먼저 화면을 차지한다. 결과적으로 TTFB와 LCP는 정적 SSG에 가깝게, 데이터 신선도는 SSR에 가깝게 가져가는 절충이다.

좋은 답변 구조

  1. 01병목 정의: 페이지 단위 렌더 모드 선택이 가장 느린 영역에 묶이는 문제로 시작한다
  2. 02측정 축: TTFB·LCP와 데이터 신선도 요구를 영역별로 분리해 본다는 관점을 제시한다
  3. 03해결 전략: 정적 셸 + Suspense 경계로 동적 영역을 분리하는 PPR 모델을 설명한다
  4. 04트레이드오프: 경계 설계 비용, 이중 캐시, 폴백이 LCP 요소를 가릴 위험을 짚는다

자주 실수하는 포인트

PPR을 lazy loading이나 코드 스플리팅과 같은 층위로 묶어 설명한다
셸을 미리 흘려보낸다는 점만 강조하고 _영역별 의사결정_이라는 본질을 놓친다
Suspense 경계가 LCP 후보 영역을 덮을 수 있다는 회귀 위험을 언급하지 않는다
정적 셸 캐시와 동적 데이터 캐시를 한 덩어리로 다룬다

실무 맥락

  • 상세 페이지에 헤더·상품 정보는 정적이고 재고·추천·카트만 사용자별로 달라지는 커머스 환경
  • LCP 후보가 본문 위쪽인데 그 자리에 개인화 영역이 끼어 있어 동적 SSR에선 TTFB가 늘어지는 환경
  • Next.js처럼 라우트 단위 렌더 모드만 고를 수 있어 한 페이지 안에서 절충이 필요한 환경
  • 뉴스·블로그처럼 본문은 정적이지만 댓글 수·좋아요·로그인 상태만 실시간으로 달라야 하는 콘텐츠 서비스

본인 경험에 녹이는 힌트

특정 페이지의 LCP가 가장 느린 한 fetch에 묶여 회귀했던 경험이 있다면 PPR의 영역 분리 동기와 연결할 수 있다

SSR과 SSG 중 어느 한쪽을 골라야 해서 개인화 영역과 캐시 가능 영역이 충돌했던 의사결정 경험을 풀 수 있다

Suspense 폴백이 본문 핵심 영역을 가려 체감 속도가 더 나빠 보였던 사례가 있다면 경계 설계 비용 이야기로 이어갈 수 있다

CDN 캐시와 사용자별 동적 데이터를 같은 페이지에서 동시에 써야 해서 캐시 무효화 전략을 따로 잡아본 경험이 있다면 이중 캐시 설계 근거로 쓸 수 있다

커뮤니티 인기 답변

전체 0개

아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.

관련 꼬리 질문

Q1PPR을 쓰는 페이지에서 LCP 후보가 동적 영역에 잡힐 때 어떻게 진단하고 어떻게 옮기나요
Q2정적 셸 캐시와 동적 데이터 캐시의 무효화 전략을 어떻게 따로 설계하나요
Q3거의 모든 영역이 개인화되는 페이지라면 PPR 대신 어떤 선택을 하고, 그 기준은 뭔가요
Q4스트리밍 중 동적 영역 fetch가 타임아웃 나거나 에러로 떨어질 때 셸과 폴백을 어떻게 다루나요
아직 답을 쓰지 않았어요.
큐레이션 답변과 다른 사람 답변을 보고, 자기 언어로 답을 정리해보면 학습 효과가 가장 큽니다.
목차
  • 01면접관의 질문 의도
  • 02큐레이션 답변
  • 03좋은 답변 구조
  • 04자주 실수하는 포인트
  • 05실무 맥락
  • 06본인 경험에 녹이는 힌트
  • 07커뮤니티 인기 답변준비중
  • 08관련 꼬리 질문