[번역] 렌더링

원글 : https://nextjs.org/docs/app/building-your-application/rendering

렌더링은 작성한 코드를 유저 인터페이스로 변환한다. 리액트와 Next.js를 사용하면 코드의 일부를 서버 또는 클라이언트에서 렌더링할 수 있는 하이브리드 웹 애플리케이션을 만들 수 있다.

이 글은 이러한 렌더링 환경, 전략 및 런타임의 차이를 이해하는 데 도움이 된다.

기본

우선, 아래 세 가지 기본 웹 개념을 아는 것이 도움이 된다:

• 애플리케이션 코드를 실행할 수 있는 환경 : 서버 및 클라이언트
• 사용자가 애플리케이션에 방문하거나 상호작용할 때 시작되는 요청/응답의 수명 주기
• 서버와 클라이언트의 코드를 분리하는 네트워크 경계

렌더링 환경

웹 애플리케이션이 렌더링되는 2가지 환경이 있다: 클라이언트와 서버

• 클라이언트는 애플리케이션 코드를 서버로 요청하는 유저의 기기에 있는 브라우저를 가리킨다. 그런 다음 서버의 응답을 유저 인터페이스로 변환한다.
• 서버는 애플리케이션 코드를 저장하고, 클라이언트로부터 요청을 받고, 적절한 응답을 반환하는 데이터 센터의 컴퓨터를 의미한다.

지금까지는, 개발자들은 서버와 클라이언트 코드를 작성할 때 다른 언어(e.g. Javascript, PHP)와 프레임워크를 사용해야 했다. 리액트를 사용하면, 개발자들은 동일한 언어(자바스크립트)와 동일한 프레임워크(e.g. Next.js 혹은 선택한 프레임워크)를 사용할 수 있다.

이러한 유연성을 통해 컨텍스트를 전환하지 않고 두 환경(서버 및 클라이언트 환경)에서 원활하게 코드를 작성할 수 있다.

그러나, 각 환경에는 고유한 기능과 제약이 있다. 따라서 서버와 클라이언트에 대해 작성하는 코드는 항상 같지는 않다. 특정한 작업(e.g. 데이터 fetching 혹은 유저 상태 관리 등)은 한 환경에서 다른 환경보다 더 적합하다.

요청-응답 생명주기

대락적으로 말하면, 모든 웹사이트는 동일한 요청-응답 생명 주기를 따른다.

1. 유저 액션 : 유저는 웹 애플리케이션과 상호작용한다. 유저는 링크를 클릭하거나, form을 제출하거나 혹은 브라우저의 주소 창에 직접 URL를 작성한다.
2. HTTP 요청 : 클라이언트는 요청된 리소스, 사용된 메소드(e.g. GET, POST) 및 필요에 따라 추가적인 데이터에 대한 필요한 정보가 포함된 HTTP 요청을 서버로 보낸다.
3. 서버 : 서버는 요청을 처리하고 적절한 리소스로 응답한다. 이 프로세스에는 라우팅, 데이터 fetching 등과 같은 몇 가지 단계가 필요할 수 있다.
4. HTTP 응답 : 요청을 처리한 후, 서버는 HTTP 응답을 클라이언트로 다시 보낸다. 이 응답은 상태 코드(요청이 성공했는지 여부를 클라이언트에 알린다)와 요청된 리소스(e.g. HTML, CSS, Javascript, static assets 등)가 포함된다.
5. 클라이언트 : 클라이언트는 리소스를 구문 분석하여 유저 인터페이스를 렌더링한다.
6. 유저 액션 : 사용자 인터페이스가 렌더링되면, 유저는 이를 조작할 수 있으며 전체 프로세스가 다시 시작된다.

하이브리드 웹 애플리케이션 구축의 주요 부분은 생명주기 내에서 작업을 분할하는 방법과 네트워크 경계를 배치하는 방법을 결정하는 것이다.

네트워크 경계

웹 개발에서, 네트워크 경계는 다양한 환경을 분리하는 개념적 선이다. (e.g. 클라이언트와 서버 or 서버와 DB)

리액트에서, 개발자들은 클라이언트-서버 네트워크 경계를 가장 합리적인 곳에 배치할 위치를 고른다.

이면에서, 이 작업은 클라이언트 모듈 그래프와 서버 모듈 그래프의 두 부분으로 나뉜다.

서버 모듈 그래프는 서버에서 렌더링되는 모든 컴포넌트가 포함되고, 클라이언트 모듈 그래프에는 클라이언트에서 렌더링되는 모든 컴포넌트가 포함된다.

모듈 그래프는 애플리케이션의 파일이 어떻게 서로 의존하는지 시각적으로 표현하는 것으로 생각하면 유용하다.

리액트의 "use client" 규칙을 사용하여 경계를 정의할 수 있다. 리액트가 클라이언트에 있는 동안 서버에서 계산 작업을 수행하도록 하는"use server" 규칙도 있다.

There's also a "use server" convention, which tells React to do some computational work on the server while on the client.

하이브리드 애플리케이션 구축

이러한 환경에서 작업하는 경우, 애플리케이션의 코드 흐름이 단방향이라고 생각하면 도움이 된다.

즉, 응답하는 동안, 애플리케이션 코드는 서버에서 클라이언트로 한 방향으로 흐른다.

클라이언트에서 서버에 액세스해야 하는 경우, 동일한 요청을 재사용하는 대신 새 요청을 서버로 보낸다. 이렇게 하면 컴포넌트를 렌더링하는 위치와 네트워크 경계를 배치하는 위치를 쉽게 이해할 수 있다.

실제로, 이 하이브리드 모델을 사용하려면 개발자는 결과를 클라이언트에 전송하고 애플리케이션을 인터랙티브하게 만들기 전에 먼저 서버에서 수행하는 작업을 고려할 것을 권장한다.

이 개념은 동일한 컴포넌트 트리에서 클라이언트 컴포넌트와 서버 컴포넌트를 인터리빙하는 방법을 고려하면 더욱 분명해진다.