https://nextjs.org/learn/dashboard-app/creating-layouts-and-pages#nested-routing
Partial Rendering이란?
Partial Rendering은 Next.js에서 사용자가 페이지 간에 이동할 때, 페이지 전체를 다시 렌더링하지 않고, 변경된 부분만 다시 렌더링하는 기술이다. 이를 통해 웹 애플리케이션의 성능을 크게 향상시킬 수 있습다.
쉽게 설명하자면:
- 기존 방식:
- 보통의 웹사이트에서는 페이지 간 이동 시, 전체 페이지가 새로 고침되고 모든 요소가 다시 로드된다. 이 과정은 느릴 수 있으며, 사용자 경험에 부정적인 영향을 줄 수 있다.
- Partial Rendering 방식:
- Next.js는 페이지 간 이동 시, 공유된 부분은 그대로 유지하고, 변경된 부분만 다시 렌더링한다.
- 예를 들어,
"/dashboard/settings"에서"/dashboard/analytics"로 이동할 때,"/dashboard"레이아웃은 그대로 유지되고,settings부분만analytics로 교체된다.
왜 Partial Rendering이 좋은가?
왜 Nextjs는 Partial Rendering를 채택했을까?
- 빠른 반응성: 페이지 전체를 새로 고치지 않기 때문에, 페이지 전환이 훨씬 빠르고 부드럽다.
- 데이터 절약: 필요한 부분만 다시 렌더링하기 때문에, 불필요한 데이터 전송과 처리를 줄일 수 있다.
- 더 나은 사용자 경험: 페이지가 자연스럽게 전환되기 때문에, 사용자가 웹사이트를 이용할 때 더 쾌적한 하다.
요약:
Partial Rendering은 페이지 이동 시 필요한 부분만 다시 렌더링하는 기술로, 성능을 향상시키고 사용자 경험을 개선하는 데 중요한 역할을 한다. 이 기술 덕분에 Next.js 애플리케이션은 빠르고 효율적으로 작동할 수 있다.
엥? 기존 React 컴포넌트 렌더링 방식이랑 같은거아닌가?
기존 React 컴포넌트의 렌더링 방식을 경험해 봤다면 위와 같은 의문이 들 수 있다.
Next.js의 Partial Rendering 방식과 기존 React 컴포넌트의 렌더링 방식 사이에는 몇 가지 중요한 차이가 있다. 이를 이해하기 위해, 두 가지 방식을 비교해 보겠다.
기존 React 컴포넌트 렌더링 방식:
- 전체 렌더링(Full Rendering):
- React는 상태(state)나 props가 변경되면 해당 컴포넌트와 그 하위 트리(자식 컴포넌트들)를 다시 렌더링한다.
- 만약 사용자가 다른 페이지로 이동하거나 상태가 변경되면, 해당 컴포넌트 트리 전체가 다시 렌더링된다.
- 이 방식은 컴포넌트가 복잡하고, 많은 데이터를 다루는 경우 성능에 부담이 될 수 있다.
- 하지만 React는 Virtual DOM을 사용하여 실제 DOM에 필요한 변경 사항만 적용하는 효율적인 업데이트를 수행한다.
- Virtual DOM 덕분에 React의 전체 렌더링 방식이 성능에 미치는 부정적 영향이 줄어들었지만, 불필요한 렌더링을 완전히 없애는 것은 아니다. React의 성능을 최적화하려면 Virtual DOM의 효율성을 최대한 활용하는 것과 함께, 불필요한 렌더링을 피할 수 있는 추가적인 최적화 방법을 적용하는 것이 중요하다.
- 단점:
- 페이지 간 이동 시, 모든 컴포넌트를 다시 렌더링해야 하므로, 특히 페이지 간 공통된 레이아웃이나 요소들이 많을 경우, 불필요한 렌더링이 발생할 수 있다.
- 페이지 전환 시, 사용자 경험이 다소 끊기는 느낌을 줄 수 있다.
Next.js의 Partial Rendering 방식:
- 부분 렌더링(Partial Rendering):
- Next.js는 페이지 간 이동 시 전체 페이지를 다시 렌더링하지 않고, 변경된 부분만 렌더링한다.
- 특히
app디렉토리에서 사용되는 서버 컴포넌트(Server Components)와 클라이언트 컴포넌트(Client Components)의 조합을 통해, 서버에서 필요한 데이터와 HTML을 미리 준비하고, 클라이언트에서는 변경된 부분만 교체하는 방식으로 동작한다.- 이 방식은 코드 분할(Code Splitting)과 Prefetching 등의 기법과 결합되어, 페이지 이동 시 필요한 데이터와 자원을 미리 로드하고, 필요한 부분만 다시 렌더링하여 성능을 최적화한다.
- 장점:
- 페이지 간 공통된 레이아웃이나 요소가 유지되기 때문에, 불필요한 렌더링을 피할 수 있다.
- 페이지 전환이 훨씬 빠르고 부드럽게 느껴진다. 예를 들어, 대시보드 내에서 탭 간 전환 시, 공통된 대시보드 레이아웃은 그대로 유지되고, 탭 내용만 다시 렌더링된다.
주요 차이점 요약:
- 렌더링의 범위:
- React: 상태나 props가 변경되면 해당 컴포넌트 트리 전체가 다시 렌더링된다.
- Next.js: 페이지 간 공통된 부분은 유지하고, 변경된 부분만 다시 렌더링한다.
- 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR):
- React: 기본적으로 클라이언트 사이드 렌더링에 의존한다.
- Next.js: 서버 사이드 렌더링과 정적 사이트 생성(SSG)을 기본적으로 지원하며, 클라이언트 사이드에서 부분 렌더링을 최적화한다.
- 데이터 페칭과 코드 분할:
- React: 데이터 페칭과 코드 분할은 개발자가 직접 관리해야 한다.
- Next.js: 데이터 페칭, 코드 분할, 그리고 프리페칭(prefetching) 같은 최적화 기법이 내장되어 있어, 페이지 전환 시 성능을 최적화한다.
결론:
기존 React는 상태나 props가 변경되면 컴포넌트 트리 전체를 다시 렌더링하는 방식이므로, 페이지 전환 시 모든 컴포넌트가 다시 렌더링될 수 있다. 반면에, Next.js는 Partial Rendering 방식을 통해 페이지 간 이동 시 변경된 부분만 렌더링하며, 성능과 사용자 경험을 향상시킨다.
다시 핵심만
기존 React는 상태 변경 시 컴포넌트 트리 전체를 다시 렌더링하지만, Next.js의 Partial Rendering은 페이지 간 이동 시 변경된 부분만 렌더링하여 성능을 최적화한다. 이를 통해 Next.js는 불필요한 렌더링을 줄이고, 더 빠르고 부드러운 페이지 전환을 제공한다.
