Partial Prerendering (PPR) is the future of Next.js!

Next.js의 Partial Prerendering (PPR)은 정적 콘텐츠와 동적 콘텐츠를 결합하여 초기 페이지 로딩 성능을 향상시키고 개인화된 데이터를 지원합니다. 🚀
SSG(Static Site Generation)는 빌드 시 HTML을 생성하여 모든 요청에 재사용하므로 빠르지만 데이터 업데이트에 유연성이 떨어집니다. ⚡️
SSR(Server-Side Rendering)은 매 요청마다 HTML을 생성하므로 동적이지만 SSG보다 느립니다. 🐌
PPR을 사용하려면 먼저 SSR을 구현해야 합니다. 🔑
Next.js에서 fetch API의 cache 속성을 no-store로 설정하면 해당 요청이 캐시되지 않아 SSR을 구현할 수 있습니다. ⚙️
Kind는 인증 및 권한 부여 솔루션으로, Next.js 애플리케이션에 쉽게 통합하여 사용자 세션을 동적으로 관리할 수 있습니다. 🛡️
Kind의 getKindServerSession 훅을 사용하여 서버 측에서 사용자 세션을 가져올 수 있습니다. 🧑‍💻
PPR은 페이지의 일부 섹션만 동적으로 렌더링하고 나머지는 정적으로 렌더링하여 성능을 최적화합니다. 🎯
정적 콘텐츠와 동적 콘텐츠를 분리하여 필요한 부분만 SSR로 처리하고 나머지는 SSG로 유지할 수 있습니다. 🧩
PPR을 통해 초기 로딩 속도를 유지하면서 동적 데이터를 제공하여 사용자 경험을 향상시킬 수 있습니다. ✨

Fullstack Slack Clone: Next.js 15, Postgresql, Supabase, Typescript, Bun, Socket.io, Deployment