부분 사전 렌더링은 Next.js 14에 도입된 실험적 기능입니다. 기능이 안정화되면 이 페이지의 내용이 업데이트될 수 있습니다. 실험적인 기능을 사용하지 않으려면 이 장을 건너뛰어도 됩니다. 이 장은 과정을 완료하는 데 필요하지 않습니다.
- 부분 사전 렌더링이란 무엇입니까?
- 부분 사전 렌더링의 작동 방식
1. 정적 콘텐츠와 동적 콘텐츠 결합
현재 경로 내에서 동적 함수(예: noStore(), cookies() 등)를 호출하면 전체 경로가 동적이 됩니다.
이것이 오늘날 대부분의 웹 앱이 구축되는 방식입니다. 전체 애플리케이션이나 특정 경로에 대해 정적 렌더링과 동적 렌더링 중에서 선택합니다.
그러나 대부분의 경로는 완전히 정적이거나 동적이지 않습니다. 정적 콘텐츠와 동적 콘텐츠가 모두 포함된 경로가 있을 수 있습니다. 예를 들어 전자상거래 사이트를 생각해 보세요. 제품 페이지의 대부분을 사전 렌더링할 수 있지만 주문형 사용자 장바구니와 추천 제품을 동적으로 가져오고 싶을 수도 있습니다.
대시보드 페이지로 돌아가서 정적 구성 요소와 동적 구성 요소 중 어떤 구성 요소를 고려하시겠습니까?
준비가 되면 아래 버튼을 클릭하여 대시보드 경로를 분할하는 방법을 확인하세요.
<SideNav>구성 요소는 데이터에 의존하지 않으며 사용자에게 개인화되지 않으므로 정적일 수 있습니다.<Page>구성 요소는 자주 변경되는 데이터에 의존하고 사용자에게 개인화되므로 동적일 수 있습니다.
2. 부분 사전 렌더링이란 무엇입니까?
Next.js 14에는 일부분을 동적으로 유지하면서 정적 로딩 셸을 사용하여 경로를 렌더링할 수 있는 실험적인 기능인 부분 사전 렌더링의 미리 보기가 포함되어 있습니다. 즉, 경로의 동적 부분을 분리할 수 있습니다. 예를 들어:
사용자가 경로를 방문할 때:
- 정적 경로 셸이 제공되어 빠른 초기 로드를 보장합니다.
- 셸에는 동적 콘텐츠가 비동기식으로 로드되는 구멍이 남습니다.
- 비동기 홀은 병렬로 스트리밍되어 페이지의 전체 로드 시간을 줄입니다.
이는 전체 경로가 완전히 정적이거나 동적인 오늘날 애플리케이션의 작동 방식과 다릅니다.
부분 사전 렌더링은 매우 빠른 정적 에지 전달과 완전한 동적 기능을 결합하며 웹 애플리케이션의 기본 렌더링 모델이 될 가능성이 있다고 믿습니다., 최고의 정적 사이트 생성과 동적 전달을 결합합니다.
🔍 퀴즈
- 부분 사전 렌더링의 맥락에서 구멍은 무엇입니까?
a. JavaScript가 비활성화된 위치
b. 동적 콘텐츠가 비동기적으로 로드되는 위치
c. 타사 스크립트가 로드되는 위치
3. 부분 사전 렌더링은 어떻게 작동하나요?
부분 사전 렌더링은 React의 Current APIs를 활용합니다. 그리고 Suspense를 사용합니다. 일부 조건이 충족될 때까지(예: 데이터 로드) 애플리케이션의 렌더링 부분을 연기합니다.
대체(fallback)는 다른 정적 콘텐츠와 함께 초기 정적 파일에 포함됩니다. 빌드 시(또는 재검증 중에) 경로의 정적 부분이 사전 렌더링 되고 나머지 부분은 사용자가 경로를 요청할 때까지 연기됩니다.
Suspense에서 구성 요소를 래핑하면 구성 요소 자체가 동적으로 만들어지는 것이 아니라(이 동작을 수행하는 데 unstable_noStore를 사용했음을 기억하세요) 오히려 Suspense가 경로의 정적 부분과 동적 부분 사이의 경계로 사용된다는 점에 주목할 가치가 있습니다.
부분 사전 렌더링의 가장 큰 장점은 이를 사용하기 위해 코드를 변경할 필요가 없다는 것입니다. Suspense를 사용하여 경로의 동적 부분을 래핑하는 한 Next.js는 경로의 어느 부분이 정적이고 어느 부분이 동적인지 알 수 있습니다.
참고: 부분 사전 렌더링 구성 방법에 대해 자세히 알아보려면 부분 사전 렌더링(실험) 설명서를 참조하거나 부분 사전 렌더링 템플릿 및 데모를 사용해 보세요. 이 기능은 실험적 이며 아직 프로덕션 배포 준비가 되지 않았다는 점에 유의하는 것이 중요합니다.
4. 요약
요약하자면, 애플리케이션에서 데이터 가져오기를 최적화하기 위해 몇 가지 작업을 수행했습니다.
- 서버와 데이터베이스 간의 대기 시간을 줄이기 위해 애플리케이션 코드와 동일한 지역에 데이터베이스를 만들었습니다.
- React Server Components를 사용하여 서버에서 데이터를 가져왔습니다. 이를 통해 서버에서 비용이 많이 드는 데이터 가져오기 및 로직을 유지하고, 클라이언트 측 JavaScript 번들을 줄이고, 데이터베이스 비밀이 클라이언트에 노출되는 것을 방지할 수 있습니다.
- SQL을 사용하여 필요한 데이터만 가져오므로 각 요청에 대해 전송되는 데이터의 양과 메모리 내 데이터를 변환하는 데 필요한 JavaScript의 양이 줄어듭니다.
- JavaScript를 사용하여 데이터 가져오기를 병렬화하는 것이 합리적입니다.
- 느린 데이터 요청이 전체 페이지를 차단하는 것을 방지하고 사용자가 모든 것이 로드될 때까지 기다리지 않고 UI와 상호 작용을 시작할 수 있도록 스트리밍을 구현했습니다.
- 데이터 가져오기를 필요한 구성 요소로 이동하여 부분 사전 렌더링을 준비할 때 경로의 어느 부분이 동적으로 이루어져야 하는지 분리합니다.
다음 장에서는 데이터를 가져올 때 구현해야 할 두 가지 일반적인 패턴인 검색과 페이지 매김을 살펴보겠습니다.
