렌더링
- Published on
- Next.js의 렌더링 환경, 전략, 및 런타임 간의 차이점을 배웁니다.
렌더링은 작성한 코드를 사용자 인터페이스로 변환합니다. 리액트와 Next.js는 서버나 클라이언트에서 코드의 일부를 렌더링할 수 있는 하이브리드 웹 애플리케이션을 만드는 데 도움을 줍니다. 이 섹션에서는 이러한 렌더링 환경, 전략, 및 런타임 간의 차이점을 이해하는 데 도움이 될 것입니다.
기본 원리
먼저, 세 가지 기본 웹 개념을 이해하는 것이 좋습니다.
렌더링 환경
웹 애플리케이션을 렌더링할 수 있는 환경은 클라이언트와 서버 이렇게 두 가지입니다.
- 클라이언트는 사용자의 장치에 있는 브라우저를 가리키며 애플리케이션 코드를 위해 서버에 요청을 보냅니다. 그런 다음 서버의 응답을 사용자 인터페이스로 변환합니다.
- 서버는 애플리케이션 코드를 저장하는 데이터 센터의 컴퓨터를 의미하며 클라이언트로부터의 요청을 받아 적절한 응답을 전송합니다.
과거에는 개발자들이 서버와 클라이언트에 대한 코드를 작성할 때 서로 다른 언어(예: JavaScript, PHP) 및 프레임워크를 사용해야 했습니다. 그러나 리액트를 사용하면 개발자들은 동일한 언어(JavaScript)와 동일한 프레임워크(예: Next.js 또는 원하는 프레임워크)를 사용할 수 있습니다. 이러한 유연성은 두 환경 모두에 대한 코드를 끊임없이 작성하는 데 도움이 됩니다.
그러나 각 환경은 고유한 기능과 제약 조건을 갖습니다. 따라서 서버와 클라이언트에 대한 코드가 항상 동일하다고는 할 수 없습니다. 특정 작업(예: 데이터 가져오기 또는 사용자 상태 관리)은 다른 환경보다 한 환경에서 더 잘 수행될 수 있습니다.
리액트와 Next.js를 효과적으로 사용하려면 이러한 차이점을 이해하는 것이 중요합니다. 서버 및 클라이언트 컴포넌트 페이지에서 차이점과 사용 사례를 더 자세히 다룰 것입니다. 지금은 기본 내용을 계속 다루겠습니다.
요청-응답 주기
대체로 모든 웹사이트는 동일한 요청-응답 주기를 따릅니다.
- 사용자 작업: 사용자가 웹 애플리케이션과 상호 작용합니다. 이것은 링크를 클릭하거나 폼을 제출하거나 브라우저의 주소 표시줄에 URL을 직접 입력하는 것일 수 있습니다.
- HTTP 요청: 클라이언트는 요청된 리소스, 사용되는 방법(예:
GET,POST) 및 필요한 경우 추가 데이터에 대한 정보를 포함하여 서버에 HTTP 요청을 보냅니다. - 서버: 서버는 요청을 처리하고 적절한 리소스를 응답합니다. 이 과정에는 라우팅, 데이터 가져오기 등 몇 단계가 포함될 수 있습니다.
- HTTP 응답: 요청을 처리한 후, 서버는 클라이언트에게 HTTP 응답을 돌려줍니다. 이 응답에는 요청이 성공적이었는지 여부를 알려주는 상태 코드와 요청된 리소스(예: HTML, CSS, JavaScript, 정적 자산 등)가 포함됩니다.
- 클라이언트: 클라이언트는 리소스를 구문 분석하여 사용자 인터페이스를 렌더링합니다.
- 사용자 작업: 사용자 인터페이스가 렌더링되면 사용자는 그것과 상호 작용할 수 있고, 전체 프로세스가 다시 시작됩니다.
하이브리드 웹 애플리케이션을 구축하는 주요 부분은 생명주기에서 작업을 어떻게 분리하고 네트워크 경계를 어디에 두는지 결정하는 것입니다.
네트워크 경계
웹 개발에서 네트워크 경계는 서로 다른 환경을 구분하는 개념적인 선입니다. 예를 들면, 클라이언트와 서버 또는 서버와 데이터 저장소 사이입니다.
리액트에서는 클라이언트-서버 네트워크 경계를 어디에 두는지 선택합니다.
백그라운드에서는 작업이 두 부분으로 나뉩니다. 클라이언트 모듈 그래프와 서버 모듈 그래프입니다. 서버 모듈 그래프에는 서버에서 렌더링되는 모든 컴포넌트가 포함되며 클라이언트 모듈 그래프에는 클라이언트에서 렌더링되는 모든 컴포넌트가 포함됩니다.
모듈 그래프를 애플리케이션의 파일이 서로 어떻게 의존하는지에 대한 시각적 표현으로 생각하는 것이 도움이 될 수 있습니다.
리액트의 "use client" 규칙을 사용하여 경계를 정의할 수 있습니다. 또한 "use server" 규칙도 있으며 이 규칙은 클라이언트에서 서버에서 일부 계산 작업을 수행하도록 리액트에 지시합니다.
하이브리드 애플리케이션 구축하기
이러한 환경에서 작업할 때, 애플리케이션의 코드 흐름을 단방향으로 생각하는 것이 도움이 됩니다. 다시 말해, 응답 중에 애플리케이션 코드는 서버에서 클라이언트로 한 방향으로 흐릅니다.
클라이언트에서 서버에 접근해야 할 경우, 동일한 요청을 재사용하는 대신 서버에 새로운 요청을 보냅니다. 이렇게 하면 컴포넌트를 어디에 렌더링할지와 네트워크 경계를 어디에 둘지를 이해하는 데 더 쉽습니다.
실제로 이 모델은 개발자들에게 먼저 서버에서 실행하고자 하는 내용을 생각한 다음, 결과를 클라이언트로 전송하여 애플리케이션을 상호 작용하게 만드는 것을 권장합니다.
이 개념은 같은 컴포넌트 트리에서 클라이언트와 서버 컴포넌트를 교차시키는 방법을 살펴볼 때 더욱 명확해질 것입니다.