https://nextjs.org/learn/dashboard-app/partial-prerendering
In this chapter
Partial Prerendering
- 정의
- 동작 원리
Combining Static and Dynamic Content
루트 내 동적 함수 호출 시ㅅ, 전체 루트는 동적이 됨
이것이 웹 앱이 설계된 방법이다.
전체 앱 혹은 특정 루트에 대해 정적, 동적 렌더링 중 하나를 골라야한다.
그러나, 대부분의 루트는 전체가 정적 혹은 동적이진 않다.
정적, 동적 둘 다를 갖고 있다.
예시로, 이커머스 사이트를 보자
상품 페이지를 프리렌더할 수 있지만. 장바구니나 상품 추천은 동적으로 fetch해야 한다.
대시보드 페이지로 가서, 어떤 컴포넌트를 동적 으로, 정적으로 할 것인가?
- SideNav 컴포넌트는 데이터에 의존하지 않고 사용자 맞춤도 아니므로 정적
- Page 컴포넌트는 데이터에 의존하고 자주 변경되며 사용자 맞춤이므로 동적
What is Partial Prerendering?
Next.js 14는 Partial Prerendering의 프리뷰를 제공한다.
- 몇 파트는 동적인 동시에, 정적 로딩 쉘과 함께 루트를 렌더할 수 있게 하는 특징
사용자가 루트 방문 시
- 정적 루트 쉘이 서브 되고, 빠른 초기 로드를 확실히 한다,
- 쉘은 동적 컨텐츠가 비동기적 로드되는 holes를 남긴다.
- 비동기 holes는 병렬 스트림 되고, 페이지 전체의 로드 시간을 줄인다.
오늘날 앱이 동작하는 방식과는 다르다.
Partial Prerendering은 동적 능력과, 매우 빠른 정적 edge deliery의 혼합이다.
그리고 이것은 디폴트 렌더링 모델이 될 것이라는 기대가 있다.
How does Partial Prerendering work?
Partial Prerendering는 특정 조건이 만족될 때까지 리액트의 Concurrent APIs 와 Suspense를 활용한다.
fallback은 초기 정적 파일에 임베드 된다.
빌드 타임에, 루트의 정적 파트는 prerender되고, 나머지는 사용자 요청시까지 미뤄진다.
서스펜스로 컴포는터를 감싸 동적이 되게 하는 것은 나쁜 점이 없지만, 서스펜스가 루트의 정적 - 동적 사이에서 쓰이게 된다.
Partial Prerendering의 가장 좋은 점은 코드를 변경할 필요가 없다는 것이다.
서스펜스로 동적 파트를 감싸면, 넥스트 js는 어느 파트가 정적이고 동적인지 알 것이다.
Summary
앱에서 데이터 페칭을 위해 한 것들
1. 서버와 DB 간 지연을 줄이기 위해 DB를 같은 공간에 생성했다.
2. 리액트 서버 컴포넌트로 데이터를 페칭했다. 이것은 서버에서의 비싼 데이터 페치와 로직을 유지하고, 클라이언트 JS 번들을 줄이며 DB의 비밀이 노출되는 것을 막는다.
3. SQL를 필요한 데이터 페칭에만 사용해 각 요청마다 전달되는 데이터 양과 메모리 내에서 전달에 필요한 JS를 줄였다.
4. JS 내 데이터 페칭을 병렬화 했다.
5. 스트리밍을 구현해 전체 페이지를 블록킹 하는 것으로부터 느린 데이터 요청을 줄였다. 그리고 사용자가 모든 로드를 기다릴 필요 없이 UI와 상호작용하게 했다.
6. 필요한 데이터를 하향 페칭 해 Partial Prerendering에 대해 동적이영 하는 루트를 isolate 했다.
다음 챕터에선, 페칭 시 필요한 공통된 패턴을 살펴볼 것이다 : Search, Pagination
