Chapter 10. Partial Prerendering (Optional)
10장
부분 사전 렌더링 (선택 사항)
부분 사전 렌더링은 Next.js 14에 소개된 실험적인 기능입니다. 이 기능이 안정화되는 과정에서 이 페이지의 내용이 업데이트될 수 있습니다. 실험적인 기능을 사용하지 않으려면 이 장을 건너뛰는 것이 좋습니다. 이 장은 강의를 완료하는 데 필수적이지 않습니다.
이번 장에서는...
다음과 같은 내용을 다룰 예정입니다.
부분 사전 렌더링이란 무엇인지?
부분 사전 렌더링이 어떻게 작동하는지?
정적 및 동적 콘텐츠 결합
현재, 루트 내에서 동적 함수를 호출하면 (예: noStore(), cookies() 등), 전체 루트가 동적으로 처리됩니다.
이는 대부분의 웹 앱이 오늘날 어떻게 구축되는지와 일치합니다. 전체 애플리케이션 또는 특정 경로에 대해 정적 또는 동적 렌더링을 선택해야 합니다.
그러나 대부분의 경로는 완전히 정적이거나 동적이지 않습니다. 정적, 동적인 컨텐츠를 모두 갖고있는 경로도 있을 수 있습니다. 예를 들어, 소셜 미디어 피드가 있다고 가정해보겠습니다. 게시물은 정적일 수 있지만 게시물에 대한 좋아요는 동적일 수 있습니다. 또는 전자 상거래 사이트에서, 상품 상세 정보는 정적일 수 있지만 사용자의 장바구니는 동적일 수 있습니다.
대시보드 페이지로 돌아가서, 어떤 컴포넌트가 정적이고 동적인지 생각해볼 수 있을까요?
준비가 되셨다면 아래 버튼을 클릭하여 대시보드 경로를 어떻게 분할할지 확인해보세요:
부분 사전 렌더링이란 무엇인가요?
Next.js 14에서 부분 사전 렌더링이라는 새로운 렌더링 모델이 미리보기로 제공됩니다. 부분 사전 렌더링은 라우트를 정적 로딩 셸로 렌더링하면서 일부 부분을 동적으로 유지할 수 있는 실험적인 기능입니다. 다시 말해, 라우트의 동적 부분을 격리할 수 있습니다. 예를 들면:
사용자가 경로를 방문할 때:
정적 경로 셸이 제공되어 초기 로드가 빠릅니다.
셸은 동적 콘텐츠가 로드될 부분에 구멍을 남깁니다.
비동기식 구멍들이 병렬로 로드되어 페이지의 전체 로드 시간을 줄입니다.
이것은 전체 경로가 완전히 정적 또는 동적으로 처리되는 현재의 애플리케이션 동작 방식과 다릅니다.
부분 사전 렌더링은 초고속 정적 엣지 전달과 완전한 동적 기능을 결합합니다. 그리고 우리는 이것이 정적 사이트 생성과 동적 전달의 장점을 모두 가져오며 웹 애플리케이션의 기본 렌더링 모델이 될 잠재력이 있다고 믿습니다.
퀴즈를 풀어보세요!
지금까지 배운 내용을 테스트해보고 지식을 확인해보세요.
부분 사전 렌더링의 "구멍(holes)"이란 무엇인가요?
A: JavaScript가 비활성화된 위치
B: 동적 콘텐츠가 비동기적으로 로드될 위치
C: 서드파티 스크립트가 로드되는 위치
정답 확인
B: 동적 콘텐츠가 비동기적으로 로드될 위치
맞았습니다! 구멍은 요청 시 동적 콘텐츠가 비동기적으로 로드되는 위치입니다.
부분 사전 렌더링이 어떻게 작동하나요?
부분 사전 렌더링은 React의 동시성 API를 활용하고 Suspense를 사용하여 애플리케이션의 일부를 조건이 충족될 때까지 렌더링을 지연시킵니다 (예: 데이터가 로드될 때까지).
폴백은 초기 정적 파일에 내장되어 다른 정적 콘텐츠와 함께 제공됩니다. 빌드 시간에 (또는 재유효화 중에), 라우트의 정적 부분이 사전 렌더링되고 나머지 부분은 사용자가 경로를 요청할 때까지 연기됩니다.
Suspense로 컴포넌트를 감싸는 것은 컴포넌트 자체를 동적으로 만드는 것이 아니라 (이전에 unstable_noStore를 사용하여 이 동작을 수행했음을 기억하세요), 정적 및 동적 라우트 부분 사이의 경계로 Suspense가 사용됩니다.
부분 사전 렌더링의 좋은 점은 코드를 변경할 필요가 없다는 것입니다. 라우트의 동적 부분을 감싸기 위해 Suspense를 사용하는 한, Next.js는 라우트의 어떤 부분이 정적이고 어떤 부분이 동적인지 인식할 것입니다.
참고: 부분 사전 렌더링을 구성하는 방법에 대해 자세히 알아보려면 부분 사전 렌더링 (실험적) 문서를 참조하거나 부분 사전 렌더링 템플릿 및 데모를 시도해보세요. 이 기능은 실험적이며 아직 배포 준비 상태가 아닙니다.
요약
요약하면, 애플리케이션에서 데이터 가져오기를 최적화하기 위해 몇 가지 작업을 수행했습니다:
서버와 데이터베이스 간 지연 시간을 줄이기 위해 애플리케이션 코드와 동일한 지역에 데이터베이스를 만들었습니다.
React 서버 컴포넌트를 사용하여 서버에서 데이터를 가져왔습니다. 이를 통해 비용이 많이 드는 데이터 가져오기와 로직을 서버에 유지하고 클라이언트 측 JavaScript 번들을 줄이며 데이터베이스 비밀 키를 클라이언트에 노출시키지 않았습니다.
필요한 데이터만 가져오도록 SQL을 사용하여 각 요청에 전송되는 데이터 양과 데이터를 메모리에서 변환하는 데 필요한 JavaScript 양을 줄였습니다.
합리적인 위치에 JavaScript로 데이터 가져오기를 병렬화했습니다.
페이지 전체를 차단하지 않고 느린 데이터 요청을 방지하기 위해 스트리밍을 구현했고, 모든 것이 로드될 때까지 기다리지 않고 사용자가 UI와 상호 작용을 시작할 수 있도록 했습니다.
데이터 가져오기를 해당 컴포넌트로 이동시켜 라우트의 어떤 부분을 동적으로 처리해야 하는지 격리했습니다.
다음 장에서는 데이터를 가져올 때 구현해야 할 두 가지 일반적인 패턴인 검색과 페이지네이션에 대해 살펴볼 것입니다.
Last updated
