Next.js

nextjs.org/docs 공식문서의 내용을 번역, 정리한 내용입니다.
사진 출처는 nextjs.org 공식문서입니다.

Rendering

렌더링은 작성한 코드를 실제 UI로 변환하는 과정이다.
React18, Next.js 13 버전에서 애플리케이션을 렌더링 하는 새로운 방식이 소개되었는데 그 내용을 정리해 보려고 한다.

Rendering Environments

애플리케이션 로드가 렌더링 될 수 있는 환경은 클라이언트, 서버 두 곳이 있다.

• 클라이언트는 유저의 기기에서 애플리케이션 코드를 받기 위해 요청을 보내는 브라우저를 말한다. 서버로부터 응답을 받으면 유저가 상호작용할 수 있는 interface로 응답을 변환한다.

• 서버는 애플리케이션 코드를 저장하고, 클라이언트로부터 요청을 받아 일부 계산과정을 한 뒤 적절한 응답을 보내주는 데이터 센터의 컴퓨터를 말한다.

Component-level Client and Server Rendering

React18 이전에는 리액트를 활용하는 애플리케이션을 렌더링 하는 기본적인 방법은 전적으로 클라이언트에 있었다.

Next.js는 애플리케이션을 페이지 단위로 쪼개어 서버에서 pre-render 과정을 통해 HTML을 생성한 뒤 클라이언트로 전송하여 클라이언트 쪽에서 리액트가 hydration 과정을 진행할 수 있는 방식을 제공하였다. 하지만, 이 과정은 클라이언트가 최초로 전달받은 HTML이 상호작용 가능하도록 만들기 위해서 추가적인 JS 파일이 필요하였다.

이제 서버 컴포넌트와 클라이언트 컴포넌트라는 개념이 생기면서 리액트가 서버와 클라이언트 모두에서 렌더링할 수 있게 되었고, 우리도 컴포넌트 단계에서 렌더링 할 환경을 결정할 수 있게 되었다.

Static and Dynamic Rendering on the Server

React 컴포넌트의 client-side, server-side 렌더링과 더불어 Next.js는 서버에서의 렌더링을 최적화하기 위해 정적 또는 동적 렌더링이라는 옵션을 준다.

Static Rendering

정적 렌더링을 사용하면 서버/클라이언트 컴포넌트 모두 빌드 타임에 서버에서 pre-rendering 될 수 있다. 이 작업의 결과는 캐싱되어 이후의 요청 시 재사용된다. 캐싱된 결과는 갱신될 수 있다. 이는 Page Router에서의 SSG와 ISR에 상응한다.

서버 컴포넌트와 클라이언트 컴포넌트는 정적 렌더링에서 다른 방식으로 렌더링 된다.

• Client Component
  HTML과 JSON이 pre-rendering되어 서버에 캐싱된다. 캐싱된 결과는 클라이언트에 전달되어 hydration 과정을 거친다.
• Server Component
  React에 의해 서버에서 렌더링되고, payload는 HTML을 생성하기 위해 활용된다. 렌더링 된 payload는 클라이언트 쪽에서 컴포넌트를 hydrate 할 때 사용되므로 클라이언트는 JS를 필요로 하지 않게 된다.

Dynamic Rendering

동적 렌더링을 사용하면 서버/클라이언트 컴포넌트 모두 request 타임에 서버에서 렌더링 된다. 작업의 결과는 캐싱되지 않는다. 이는 Page Router에서의 SSR (getServerSideProps()) 에 상응한다.

Edge and Node.js Runtimes

서버에는 페이지가 렌더링 될 수 있는 두 가지 런타임이 있다.

• Node.js 런타임은 default 값으로, 모든 Node.js API와 호환 가능한 모든 패키지에 접근 가능하다.
• Edge 런타임은 Web API에 기반을 둔다.

두 가지 런타임은 모두 배포 기반에 따라 서버로부터의 streaming을 지원한다.