Server Components
- React Server Components는 서버에서 랜더링 하고 선택적으로 캐시할 수 있는 UI를 작성할 수 있다.
- NestJs의 서버 랜더링은 streaming / partial rendering을 활성화 하기 위해, 세 가지 서버 랜더링 전략으로 나눠진다.
- Static Rendering(Default)
- 빌드 후 랜더링 되거나 캐시 데이터 업데이트 시 랜더링된다.
- Path에 데이터가 있지 않고, 정적인 데이터들이 있을 경우 사용
- Dynamic Rendering
- 랜더링이 매 요청 시마다 진행된다.
- Path에 데이터가 있거나, 쿠키 등에 정보가 있는 경우 사용한다.
- NestJs는 dynamic function이나 캐시되지 않은 데이터가 발견되면 자동으로 동적 렌더링으로 전환한다.
- Dynamic function
- 사용자 쿠키, 요청 해더, URL 매개변수와 같은 요청 등
cookies(),headers()searchParams→ /shop?a=1 인 경우 { a: ‘1’ }- Streaming
- 서버에서 UI를 점진적으로 렌더링 할 수 있다.
- 전체 콘텐츠의 렌더링이 완려되기 전 페이지의 일부를 즉시 볼 수 있다.
Client Components
- Client Rendering을 사용하면 다음 장점이 있다.
- Interactive : useState, useEffect, 이벤트 리스너 사용 가능 → 즉각적인 피드백 제공, UI 업데이트 가능
- 브라우저 API 사용 가능(geolocation, localStorage 등)
'use client': Client Component를 사용하려면, use client를 파일 맨 위에 붙여준다.
- NestJs의 클라이언트 랜더링은 Full page load, Subsequent Navigations로 나눠진다.
- Full page load
- 초기 페이지 로드를 최적화하기 위해 NestJs는 리엑트 API를 사용해 정적 HTML preview를 클라이언트, 서버 모두에서 랜더링한다.
- 클라이언트가 JS 다운로드, 실행 등(SSR)까지의 시간동안 페이지의 콘텐츠를 즉시 볼 수 있다.
- SSR이 진행되는 동안, Client 쪽에서는
- non-interactive한 HTML을 즉시 보여준다.
- RSC(React server component) 페이로드는 클라이언트/서버 컴포넌트를 조정하고 DOM을 업데이트한다.
- JS는 클라이언트 컴포넌트를 hydrate하고 UI를 대화형으로 만드는데 사용된다.
- hydrate: 서버에서 받은 초기 데이터를 사용하여 클라이언트 측의 상태를 초기화하는 과정
- Subsequent Navigations
- 클라이언트 컴포넌트가 서버에서 렌더링 된 HTML 없이 클라이언트에서 완전히 렌더링됨
Composition Patterns
- 서버 랜더링
- 데이터 가져오기
- 백엔드 리소스에 엑세스
- 민간한 정보(access token, api key 등)
- 서버에 큰 의존성 유지
- 클라이언트 렌더링
- 상호작용 및 이벤트 리스너(
onClick(),onCharge()) - 상태 및 수명주기 효과 사용(
useState(),useReducer()) - 브라우저 전용 API 사용, 리액트 클래스 구성요소 사용
Share article
