[Next.js] 번역-Rendering Fundamentals

이 포스팅은 Next.js v13의 Docs 중 Rendering Fundamentals 관련 부분을 번역하여 정리한 내용을 담고 있습니다.

 

반응형

 

[Next.js] Rendering Fundamentals

---

Next.js Rendering Fundamentals

 

Rendering은 작성한 코드를 UI(User Interface)로 변환합니다. React 18과 Next.js 13에는 애플리케이션을 렌더링하는 새로운 방법이 도입되었습니다. 이 페이지는 렌더링 환경, 전략, 런타임의 차이점과 이를 선택하는 방법을 이해하는 데 도움이 될 것입니다.

 

Rendering Environments

application 코드를 렌더링할 수 있는 환경에는 client와 server 두 가지가 있습니다.

• client는 application 코드에 대한 요청을 서버에 보내는 사용자 디바이스의 브라우저를 말합니다. 그런 다음 서버의 응답을 사용자가 interact 할 수 있는 interface로 변환합니다.
• server는 application 코드를 저장하고, 클라이언트로부터 요청을 받고, 일부 연산을 수행한 후 적절한 응답을 다시 보내는 데이터 센터의 컴퓨터를 말합니다.

 

Component-level Client and Server Rendering

React 18 이전에는 React를 사용하여 애플리케이션을 렌더링하는 주요 방법은 전적으로 클라이언트에서 이루어졌습니다.

Next.js는 애플리케이션을 페이지로 나누고 HTML을 생성하여 서버에서 미리 렌더링한 후 클라이언트로 전송하여 React가 hydrated 할 수 있도록 하는 더 쉬운 방법을 제공했습니다. 하지만 이로 인해 초기 HTML을 interactive하게 만들기 위해 클라이언트에서 추가적인 자바스크립트가 필요했습니다.

이제 Server and Client Components를 사용하면 React가 클라이언트와 서버에서 렌더링할 수 있으므로 컴포넌트 수준에서 렌더링 환경을 선택할 수 있습니다.

기본적으로 app directory는 서버 컴포넌트를 사용하므로 서버에서 컴포넌트를 쉽게 렌더링할 수 있고 클라이언트로 전송되는 JavaScript의 양을 줄일 수 있습니다.

컴포넌트 트리에서 클라이언트 컴포넌트를 서버 컴포넌트로 가져오거나 서버 컴포넌트를 자식이나 프로퍼티로 클라이언트 컴포넌트에 전달하여 서버와 클라이언트 컴포넌트를 interleave 할 수 있습니다. 백그라운드에서 React는 두 환경의 작업을 병합합니다.

 

next.js Composition methods

구성 방법을 알아보려면 Server and Client Components page를 참조하세요.

 

Static and Dynamic Rendering on the Server

React 컴포넌트를 사용한 client-side 및 server-side 렌더링 외에도 Next.js는 Static 및 Dynamic Rendering(동적 렌더링)을 통해 서버에서 렌더링을 최적화할 수 있는 옵션을 제공합니다.

Static Rendering

Static Rendering(정적 렌더링)을 사용하면 빌드 시점에 Server와 Client 컴포넌트를 모두 서버에서 미리 렌더링할 수 있습니다. 작업 결과는 cached 되어 이후 요청 시 재사용됩니다. 캐시된 결과는 재검증(revalidated) 할 수도 있습니다.

💡 Note: 이는 Static Site Generation (SSG) 및 Incremental Static Regeneration (ISR)와 동일합니다.

 

Server와 Client 컴포넌트는 Static Rendering 중에 다르게 렌더링됩니다:

• Client 컴포넌트는 HTML과 JSON을 미리 렌더링하여 서버에 캐시합니다. 그런 다음 캐시된 결과가 클라이언트로 전송되어 hydration 됩니다.
• Server 컴포넌트는 React에 의해 서버에서 렌더링되며, payload는 HTML을 생성하는 데 사용됩니다. 렌더링된 동일한 payload가 클라이언트에서 컴포넌트를 hydrate하는 데에도 사용되므로 클라이언트에서 자바스크립트가 필요하지 않습니다.

 

 

Dynamic Rendering

Dynamic Rendering을 사용하면 Server와 Client 컴포넌트 모두 요청 시점(**request time)**에 서버에서 렌더링됩니다. 작업 결과는 캐시되지 않습니다.

💡 Note: 이는 Server-Side Rendering getServerSideProps() 과 동일합니다.

static 및 dynamic 동작에 대해 자세히 알아보려면 Static and Dynamic Rendering 페이지를 참조하세요. 캐싱에 대해 자세히 알아보려면 Caching and Revalidating 섹션을 참조하세요.

 

 

Edge and Node.js Runtimes

On the server, there are two runtimes where your pages can be rendered:

• The Node.js Runtime (default) has access to all Node.js APIs and compatible packages from the ecosystem.
• The Edge Runtime is based on Web APIs.

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

• Node.js Runtime(기본값)은 모든 Node.js API와 ecosystem 호환 패키지에 액세스할 수 있습니다.
• Edge Runtime은 Web APIs를 기반으로 합니다.

배포 인프라에 따라 두 런타임 모두 서버에서 streaming을 지원합니다.

런타임 간에 전환하는 방법을 알아보려면 Edge and Node.js Runtimes 페이지를 참조하세요.

 

💡 Edge Runtime이란?
Next.js는 React 기반의 서버사이드 렌더링 프레임워크로, 브라우저와 서버 모두에서 코드를 실행합니다. Next.js에서 Edge Runtime은 클라이언트 측에서 실행되는 JavaScript 코드를 의미합니다.
일반적으로 브라우저에서 JavaScript 코드를 실행하기 위해서는 브라우저의 JavaScript 엔진(V8 등)이 필요합니다. Edge Runtime은 이와 유사하게 브라우저에서 실행되는 JavaScript 코드를 처리하기 위한 런타임 환경입니다.
Node.js Runtime은 반면 서버 측에서 실행되는 JavaScript 코드를 처리하는 런타임 환경을 의미합니다. Next.js에서 Node.js Runtime은 서버 측에서 코드를 실행하고, HTML을 생성하는 데 사용됩니다.
따라서 Next.js에서 Edge and Node.js Runtimes는 각각 클라이언트 측과 서버 측에서 코드를 실행하는 런타임 환경을 나타내며, 이를 통해 빠르고 효율적인 서버사이드 렌더링을 구현할 수 있습니다.