🌱 해당 포스트는 한 입 크기로 잘라먹는 Next.js(v15)을 수강하고, Next.js 공식 문서 - app router를 참고하여 정리한 글입니다.
서버 컴포넌트
React Server Components는 UI를 서버에서 렌더링하고 선택적으로 캐싱할 수 있는 기능을 제공한다. Next.js에서는 라우트(route)기준으로 나누어 렌더링한다. 렌더링 전략은 크게 세가지가 있다.
- Static Rendering (정적 렌더링)
- Dynamic Rendering (동적 렌더링)
- Streaming (스트리밍)
서버 컴포넌트 렌더링 과정
서버에서, Next.js는 React의 API를 사용하여 렌더링을 조정합니다. 렌더링 작업은 route(라우트) 세그먼트와 Suspense 경계로 나뉩니다.
각 청크는 두 단계로 렌더링됩니다.
📡 서버에서
-
[서버 컴포넌트 실행] React는 Server Components를 React Server Component Payload (RSC Payload) 라는 특별한 데이터 형식으로 렌더링합니다.
-
[클라이언트 컴포넌트 실행] Next.js는 RSC Payload와 Client Component JavaScript 코드를 사용하여 HTML을 서버에서 생성한다.
👩🏻💻 클라이언트에서
-
전달 받은 사전 렌더링된 HTML을 보여준다. (FCP 개선)
-
클라이언트로 RSC Payload 전달하여 사용한다. (서버 컴포넌트와 클라이언트 컴포넌트 트리를 연결하고, DOM을 업데이트 하기 위해서 필요)
⭐️ 더 알아보기
3.(클라이언트 컴포넌트의 경우) JavaScript 코드를 실행시켜 Client Components를 Hydration하여 애플리케이션을 인터렉션 가능하도록 변경한다.
서버 렌더링 전략
Static Rendering (정적 렌더링)
Next.js의 기본적인 렌더링 방식이다. 정적 렌더링을 사용하면, 경로(route)가 빌드 시간에 렌더되거나, 데이터 재검증이 끝났을 때 렌더된다.
정적 렌더링은 개인화된 페이지가 아닌, 사용자 구분 없이 같은 내용을 보여줘야할 때, 유용하다.
예시) 정적 블로그 게시물, 제품 페이지
Dynamic Rendering (동적 렌더링)
동적 렌더링은 사용자로부터 요청받았을 때, 경로(route)가 렌더링 된다.
동적 렌더링은 사용자마다 데이터가 달라 개인적인 페이지를 보여줘야하거나, 요청 시에만 알 수 있는 정보가 페이지에서 필요한 경우 유용하다. 예를 들어, 쿠키(cookie) 가 필요한 경우나 URL의 search params가 있는 경우가 있다.
동적 렌더링으로 동작하는 경우
Dynamic API의 사용 여부와, fetch 함수를 { cache: 'no-store' } 옵션과 함께 사용했는지 여부에 따라 동적 렌더링을 할지 정적 렌더링을 할지 결정한다.
어떤 렌더링으로 동작할지는 위 상황에 따라, Next.js가 가장 최적의 방식으로 자동 결정해주기 때문에, 이를 개발자가 고민할 필요는 없다.
동적 API란?
동적 API는 사전 렌더링 시점에는 알 수 없고, 요청 시점에만 알 수 있는 정보에 의존하는 API를 말한다. 이러한 API를 사용하면 개발자가 해당 경로를 요청 시점에서 동적으로 렌더링하겠다는 의도를 나타내는 것이며, 해당 경로 전체가 동적 렌더링으로 전환된다.
예시)cookies,headers,connection,draftMode,searchParamsprop,unstable_noStore
Streaming (스트리밍)
스트리밍은 서버에서 UI를 청크로 나누어 클라이언트에 스트리밍할 수 있게 한다. 작업은 청크 단위로 나뉘어 준비가 되면 클라이언트에 스트리밍되며, 사용자가 페이지의 일부를 즉시 볼 수 있게 한다.
