Progressive Partial Rendering(PPR)은 웹 페이지의 로딩 성능을 최적화하는 기법으로, 페이지의 전체 콘텐츠를 한 번에 로딩하는 대신 중요도에 따라 콘텐츠를 단계적으로 로딩하는 방식입니다.

이 방법을 통해 사용자는 핵심 콘텐츠를 먼저 볼 수 있게 되어 체감 로딩 시간이 단축됩니다.

주요 기법으로는 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)을 혼합한 하이브리드 렌더링, 스트리밍 SSR, 점진적 하이드레이션 등이 있습니다.

이러한 PPR 기법들은 First Contentful Paint(FCP)와 Time To Interactive(TTI) 같은 성능 지표를 개선하는데 도움이 됩니다.

Progressive Partial Rendering과 Lazy Loading의 차이점은 무엇인가요?🤔

Lazy Loading은 주로 뷰포트 밖에 있는 이미지나 컴포넌트와 같은 특정 리소스를 필요한 시점에 로드하는 기술입니다.

반면, Progressive Partial Rendering은 더 넓은 개념으로, 페이지의 핵심 콘텐츠를 먼저 렌더링하고 우선순위가 낮은 부분은 점진적으로 렌더링하는 전체적인 접근 방식입니다.

Lazy Loading은 Progressive Partial Rendering을 구현하는 기법 중 하나라고 볼 수 있습니다.

Progressive Partial Rendering이 SEO에 미치는 영향은 무엇인가요? 🤔

Progressive Partial Rendering은 SEO에 긍정적인 영향을 미칠 수 있습니다. 핵심 콘텐츠가 더 빨리 로드되기 때문에 검색 엔진 크롤러가 중요한 콘텐츠를 더 효율적으로 색인화할 수 있습니다.

특히 서버 사이드 렌더링이나 하이브리드 접근 방식을 사용할 경우, HTML이 미리 렌더링되어 제공되므로 검색 엔진이 JavaScript를 실행하지 않고도 콘텐츠를 이해할 수 있어 유리합니다.

또한 Core Web Vitals 성능 지표가 SEO 순위에 영향을 미치는데, Progressive Partial Rendering은 LCP(Largest Contentful Paint), FID(First Input Delay), CLS(Cumulative Layout Shift) 같은 지표를 개선하는 데 도움이 됩니다.