10. 부분 사전 렌더링(Partial Prerendering - Optional)

부분 사전 렌더링은 Next.js 14에 도입된 실험적 기능이다. 기능이 안정화되면서 이 페이지의 내용이 업데이트될 수 있다. 실험적인 기능을 사용하지 않으려면 이 장을 건너뛰어도 된다. 이 장은 전체 과정을 완료하는 데 꼭 필요하지 않다.

 

이번장에 다룰 주제는 아래와 같다.

• 부분 사전 렌더링이란?
• 부분 사전 렌더링의 작동 방식

 

정적 콘텐츠와 동적 콘텐츠 결합

현재 경로 내에서 동적 함수(예: noStore(), cookie() 등)를 호출하면 전체 경로가 동적이 된다.

 

이는 오늘날 대부분의 웹 앱이 구축되는 방식과 일치한다. 전체 애플리케이션 또는 특정 경로에 대해 정적 렌더링과 동적 렌더링 중에서 선택한다.

 

그러나 대부분의 경로는 완전히 정적이거나 동적이지 않다. 정적 콘텐츠와 동적 콘텐츠가 모두 포함된 경로가 있을 수 있다. 예를 들어 소셜 미디어 피드가 있고 게시물은 정적이지만 게시물에 대한 좋아요 수는 동적이라고 가정해 보겠다. 또는 제품 세부 정보는 정적이지만 사용자 장바구니는 동적인 전자 상거래 사이트도 생각해 볼 수 있다.

 

대시보드 페이지로 돌아가서 정적 컴포넌트와 동적 컴포넌트 중 어떤 컴포넌트를 고려할까?

• <SideNav> 컴포넌트는 데이터에 의존하지 않으며 사용자에게 개인화되지 않으므로 정적일 수 있다.
• <Page>의 컴포넌트는 자주 변경되는 데이터에 의존하고 사용자에게 개인화되므로 동적일 수 있다.

 

부분 사전 렌더링이란?

Next.js 14에는 부분 사전 렌더링(Partial Prerendering)이라는 새로운 렌더링 모델의 실험적 기능이 있다. 부분 사전 렌더링은 일부 부분을 동적으로 유지하면서 정적 로딩 셸을 사용하여 경로를 렌더링할 수 있는 기능이다. 즉, 경로의 동적 부분을 분리할 수 있다. 예를 들면 아래와 같다.

 

사용자가 경로를 방문할 때:

• 정적 경로 셸이 제공되므로 초기 로드가 빨라집니다.
• 셸에는 동적 콘텐츠가 비동기로 로드되는 구멍이 생긴다.
• 비동기 구멍이 병렬로 로드되어 페이지의 전체 로드 시간이 단축됩니다.

 

이는 전체 경로가 완전히 정적이거나 동적인 오늘날 애플리케이션의 작동 방식과 다르다.

부분 사전 렌더링은 매우 빠른 정적 에지 전달과 완전한 동적 기능을 결합하며, 향후에는 정적 사이트 생성과 동적 전달을 결합하는 방식이 웹 애플리케이션의 기본 렌더링 모델이 될 가능성이 있다고 믿는다.

 

 

부분 사전 렌더링은 어떻게 작동할까?

부분 사전 렌더링은 React의 Concurrent API를 활용하고 Suspense를 사용하여 일부 조건이 충족될 때까지(예: 데이터 로드) 애플리케이션의 렌더링 부분을 연기한다.

폴백은 다른 정적 콘텐츠와 함께 초기 정적 파일에 포함된다. 빌드 시(또는 유효성 재검사 중에) 경로의 정적 부분이 사전 렌더링되고 나머지 부분은 사용자가 경로를 요청할 때까지 연기된다.

Suspense에서 컴포넌트를 래핑하면 컴포넌트 자체가 동적으로 만들어지지 않고(이 동작을 달성하기 위해 불안정한_noStore를 사용한 것을 기억하십시오) 오히려 Suspense가 경로의 정적 부분과 동적 부분 사이의 경계로 사용된다는 점에 주목할 가치가 있다.

부분 사전 렌더링의 가장 큰 장점은 이를 사용하기 위해 코드를 변경할 필요가 없다는 것이다. Suspense를 사용하여 경로의 동적 부분을 래핑하는 한 Next.js는 경로의 어느 부분이 정적이고 어느 부분이 동적인지 알 수 있다.

참고: 부분 사전 렌더링을 구성하는 방법에 대해 자세히 알아보려면 부분 사전 렌더링(실험용) 설명서를 참조하거나 부분 사전 렌더링 템플릿 및 데모를 사용해 보자. 이 기능은 실험적이며 아직 프로덕션 배포 준비가 되지 않았다는 점에 유의하는 것이 중요하다.

 

요약

요약하자면, 애플리케이션에서 데이터 페치를 최적화하기 위해 몇 가지 작업을 수행했다.

• 서버와 데이터베이스 간의 대기 시간을 줄이기 위해 애플리케이션 코드와 동일한 지역에 데이터베이스를 만들었다.
• React Server Components를 사용하여 서버에서 데이터를 가져왔다. 이를 통해 서버에서 비용이 많이 드는 데이터 페치 및 관련 로직을 유지하고, 클라이언트 측 JavaScript 번들을 줄이고, 데이터베이스 패스워드 등이 클라이언트에 노출되는 것을 방지할 수 있다.
• SQL을 사용하면 필요한 데이터만 가져오므로 각 요청에 대해 전송되는 데이터의 양과 메모리 내 데이터를 변환하는 데 필요한 JavaScript의 양이 줄어든다.
• JavaScript를 사용하여 데이터 페치를 병렬화하는 것이 합리적이다.
• 느린 데이터 요청이 전체 페이지를 차단하는 것을 방지하고 사용자가 모든 것이 로드될 때까지 기다리지 않고 UI와 상호 작용을 시작할 수 있도록 스트리밍을 구현했다.
• 데이터 페치를 필요로한 컴포넌트로 이동하여 부분 사전 렌더링을 준비할 때 경로의 어느 부분이 동적으로 이루어져야 하는지 결정한다.

 

다음 장에서는 데이터를 가져올 때 구현해야 할 두 가지 일반적인 패턴인 검색과 페이지네이션을 살펴보겠다.