자바스크립트 + 리액트 디자인 패턴

353

Chapter 13_

렌더링 패턴

13.10.1

RSC

와

Next

.

js

App

Router

를 활용한 하이브리드 렌더링

Next

.

js

13

부터는 새로운 기능과 규칙, 그리고

RSC

지원을 포함한 애플리케이션 라우터

22

를

도입했습니다.

app

디렉토리 내의 컴포넌트는 기본적으로

RSC

로 설정되어있기에, 자동으로

서버 컴포넌트로 렌더링되고 성능이 향상됩니다.

RSC

는 서버 인프라를 활용하고, 대용량 의존성을 서버 사이드에 유지하는 등의 이점을 제공

하여 성능 향상과 클라이언트 사이드 번들 크기 감소의 이점을 가져다 줍니다.

Next

.

js

App

Router

는 서버 렌더링과 클라이언트 사이드 상호작용을 결합하여 점진적으로 애플리케이션

을 향상시키고 매끄러운 사용자 경험을 제공합니다.

클라이언트 컴포넌트는 이전의

Next

.

js

12

버전에서 했던 것처럼 클라이언트 사이드의 상호

작용 기능을 추가하기 위해 사용됩니다.

'

use

client

'

지시문을 사용하여 컴포넌트를 클라

이언트 컴포넌트로 선언할 수 있습니다.

'

use

client

'

지시문이 없는 컴포넌트는 다른 클

라이언트 컴포넌트에 의해

import

되지 않는 한 자동으로 서버 컴포넌트로 렌더링됩니다.

서버 컴포넌트와 클라이언트 컴포넌트는 동일한 컴포넌트 트리 내에 혼합되어 사용될 수 있

으며, 리액트는 두