Rendering Fundamentals (렌더링 기본)

렌더링은 당신이 작성한 코드를 유저 인터페이스로 변환합니다.

리액트 18과 Next.js 13은 당신의 애플리케이션을 렌더하는 새로운 방법을 제시합니다. 이 페이지는 렌더링 환경, 전략, 런타임, 그리고 이들을 어떻게 적용하는지에 대한 차이점을 이해하는 데에 도움을 줄 겁니다.

Rendering Environments (렌더링 환경)

렌더링 환경에는 당신의 애플리케이션 코드들이 렌더될 수 있는 두 가지 환경이 있습니다: 클라이언트 그리고 서버 입니다.

• 클라이언트는 서버에 당신이 작성한 애플리케이션 코드를 받기 위한 요청을 보내는 유저가 사용하는 기기의 브라우저를 뜻합니다. 이는 서버로부터의 응답을 통해 유저가 상호작용 할 수 있는 인터페이스로 변화합니다.
• 서버는 당신이 작성한 애플리케이션 코드들이 저장되어 있는 데이터 센터의 컴퓨터를 뜻하며, 클라이언트로부터 요청을 받아 얼마간의 연산을 거친 뒤, 적합한 응답을 되돌려 보내주는 주체를 뜻합니다.

노트: 서버는 당신의 애플리케이션이 배포된 Origin Regions에 위치해 있는 컴퓨터들, 애플리케이션 코드가 분산되어 있는 엣지 네트워크, 또는 캐싱될 수 있는 렌더링 결과물들이 위치해 있는 CDN 등을 뜻하는 일반적인 이름입니다.

Component-level Client and Server Rendering (컴포넌트 레벨의 클라이언트/서버 렌더링)

리액트 18 이전에, 리액트를 이용하여 당신의 애플리케이션을 렌더링하는 주요한 방법은 전적으로 클라이언트 측에 의존했습니다.

Next.js는 당신의 애플리케이션을 페이지들로 쪼개고, HTML을 생성하여 서버에서 프리렌더링 하며 클라이언트에 보내 리액트를 통해 hydrate될 수 있도록 하는 더 쉬운 방법을 제공했습니다. 그러나, 이는 첫 HTML을 인터랙티브하게 만들기 위해 클라이언트 측의 추가적인 자바스크립트를 필요로 하게 만들었습니다.

이제, 서버/클라이언트 컴포넌트를 통해 리액트는 컴포넌트 레벨에서 렌더링 환경을 선택할 수 있도록 클라이언트 그리고 서버 컴포넌트를 통해 렌더링을 진행할 수 있습니다.

기본적으로, app 디렉토리는 서버에서 쉽게 컴포넌트들을 렌더하고, 클라이언트에 보내지는 자바스크립트의 양을 줄일 수 있는 서버 컴포넌트를 사용합니다.

동시에 당신은 클라이언트 컴포넌트를 서버 컴포넌트에 임포트에서 사용하거나, 서버 컴포넌트를 클라이언트 컴포넌트의 prop이나 자식 요소로 패스하여 서버/클라이언트 컴포넌트를 교차하거나 서로 엮어서 사용할 수 있습니다. 이러한 과정 뒤에서는, 리액트가 양쪽 환경의 결과물들을 합쳐 줄 겁니다.

Static and Dynamic Rendering on the Server (서버에서의 정적/동적 렌더링)

리액트 컴포넌트를 통한 클라이언트 사이드 및 서버 사이드 렌더링에 더하여, Next.js는 정적 그리고 동적 렌더링을 통해 서버에서 렌더링을 최적화할 수 있는 옵션을 제공합니다.

Static Rendering (정적 렌더링)

정적 렌더링의 경우, 서버 그리고 클라이언트 컴포넌트 모두 빌드 타임에 서버에서 프리렌더 될 수 있습니다. 렌더링 결과는 캐싱되며, 뒤따르는 리퀘스트에서 재사용될 수 있습니다. 캐싱된 결과물은 또한 revalidate될 수 있습니다.

노트: 이는 정적 생성 (SSG)와 점진적 정적 재생성 (ISR)과 동일합니다.

서버/클라이언트 컴포넌트는 정적 렌더링 동안 다르게 렌더링됩니다:

• 클라이언트 컴포넌트는 서버에서 프리렌더링 되고 캐싱된 HTML와 JSON을 가지게 됩니다. 그리고 캐싱된 결과물은 수화(hydartion)되기 위해 클라이언트로 보내집니다.

• 서버 컴포넌트는 리액트에 의해 서버에서 렌더링되고, 해당 결과물이 HTML을 생성하기 위해 사용됩니다. 동일한 렌더 결과물들 또한 클라이언트에서 컴포넌트들을 수화(hydrate)하기 위해 사용되며, 클라이언트에서는 자바스크립트가 필요 없게 됩니다.

Dynamic Rendering (동적 렌더링)

다이나믹 렌더링의 경우, 서버 그리고 클라이언트 컴포넌트들은 요청 시에 서버에서 렌더링됩니다. 결과물은 캐싱되지 않습니다.

노트 : 이는 서버 사이드 렌더링 (getServerSideProps())과 동일합니다.

정적/동적 행동 양식에 대해 더 알아보려면, 정적/동적 렌더링 페이지를 참조하세요. 캐싱에 대해 더 알아보려면, 캐싱과 재유효화 섹션을 참조하세요.

Edge and Node.js Runtimes (엣지와 Node.js 런타임)

서버에는 페이지들이 렌더될 수 있는 두가지 런타임이 존재합니다:

• Node.js 런타임 (기본)의 경우, 모든 Node.js API과 상응하는 개발 환경의 모든 패키지에 접근 가능합니다.
• 엣지 런타임의 경우는 Web API들에 기반합니다.

양쪽 모두 개발 인프라스트럭쳐에 기반하여 서버로부터의 스트리밍을 지원합니다.

런타임을 어떻게 변경하는지 알고 싶으면, 엣지와 Node.js 런타임 페이지를 참조하세요.