Next.js PPR Is A Game-Changer!
- Next.js 팀이 개발 중인 부분 사전 렌더링(PPR)은 Next.js 앱의 성능을 크게 향상시킬 게임 체인저가 될 것입니다. 🚀
- 기본적으로 Next.js 페이지는 빌드 시 정적으로 사전 렌더링되어 HTML이 한 번 생성되고 CDN을 통해 반복적으로 제공되므로, 최적의 성능과 효율성을 제공합니다. 🏗️
cookies나 headers와 같은 동적 API를 페이지의 어떤 부분에서라도 사용하면, 전체 페이지가 정적 렌더링에서 제외되어 요청 시마다 동적으로 렌더링되며, 이는 사용자 경험을 저하시키고 비효율적입니다. 🐢
- 인증(authentication)과 같은 기능은 종종 쿠키나 헤더를 사용하므로, 헤더 컴포넌트 등에 포함될 경우 모든 페이지가 동적으로 렌더링되어 앱 전체의 성능에 영향을 미칠 수 있습니다. 🍪
- PPR은 페이지의 대부분을 정적으로 유지하면서 특정 동적 부분만 격리하여 렌더링할 수 있게 함으로써, 기존 SSR의 "전부 아니면 전무" 문제를 해결하고 효율성을 극대화합니다. 💡
- 현재 PPR은 실험적인 기능으로,
next.config.js에서 옵트인하고 Canary 버전을 사용해야 하며, 페이지에서 experimental_PPR: true를 명시적으로 export해야 합니다. 🧪
- (스폰서) AI 기반 테스트 도구인 Test Sprite는 테스트 계획 생성, Playwright 테스트 실행, 비디오 기록, 문제 보고 및 자동 수정 시도를 통해 애플리케이션 테스트를 자동화하여 개발자가 자가 개선 소프트웨어를 구축할 수 있도록 돕습니다. 🤖