[ Next.js 공식 문서 ] Rendering (0) - Rendering

 

 

  렌더링은 작성한 코드를 사용자 인터페이스로 바꾸는 과정이다. React 와 Next.js 를 사용하면 서버 혹은 클라이언트에서 렌더링 할 수 있는 하이브리드 웹 어플리케이션을 만들 수 있다. 이번 섹션에서는 렌더링 환경, 전략, 런타임의 차이점을 이해하는데 도움을 준다.

 

---

1. 기본

  시작하기에 앞서 세 가지 기본 웹 컨셉을 이해하는 것이 좋다.

 

1. 환경 : 애플리케이션 코드가 실행될 수 있는 환경. 서버와 클라이언트
2. 요청-응답의 라이프사이클 : 사용자가 애플리케이션을 방문하거나 상호 작용할 때 실행
3. 네트워크 바운더리(경계): 서버 코드와 클라이언트 코드를 구분하는 경계

 

1-1) 렌더링 환경

  웹 애플리케이션은 서버, 클라이언트 두 환경에서 렌더링 될 수 있다.

 

 

  클라이언트라 함은 사용자 디바이스에 있는 브라우저다. 서버 애플리케이션 코드를 요청하고 서버의 응답을 사용자의 인터페이스로 바꾼다. 

 

  서버는 데이터 센터에 있는 컴퓨터로, 클라이언트로부터 요청을 받고 적절한 응답을 보낸다.

 

  오랜 시간 개발자들은 서버와 클라이언트 코드를 작성할 때 다른 언어와 프레임워크를 사용해야만 했다. 하지만 React 를 사용하면 동일한 프레임워크로 서버와 클라이언트 두 환경 모두 원활하게 코드를 작성할 수 있다.

 

  다만, 각 환경마다 고유의 기능과 제한 사항이 있어 서버와 클라이언트에 작성하는 코드는 항상 같지 않다. 데이터 가져오기, 사용자 상태 관리 등은 다른 환경보다 한 환경에서 사용하는 것이 더 적합하다. 

 

  이런 차이점을 이해하는 것은 React 와 Next.js 를 효과적으로 사용하는데 도움을 준다. 

 

 

1-2) 요청-응답의 라이프 사이클

  일반적으로 모든 웹사이트는 동일한 요청-응답 라이프 사이클을 따른다.

 

1. 사용자 행동
   : 사용자가 웹 애플리케이션과 상호작용한다. 이는 링크 클릭, 양식 제출 또는 브라우저 주소 표시줄에 URL 을 입력하는 것 등이다.
   
   
2. HTTP 요청
   : 클라이언트는 자원을 요청하는데 필요한 데이터를 포함해 서버로 HTTP 요청을 보낸다. 이 때, 어떤 메소드(e.g. GET, POST)를 사용할 것인지나 필요한 경우 추가 데이터를 포함시킨다.
   
   
3. 서버 
   : 서버는 요청을 처리하고 적절한 자원으로 응답한다. 이 과정에서 라우팅, 데이터 가져오기 등의 몇 단계가 포함될 수 있다.
   
   
4. HTTP 응답
   : 요청을 처리한 후, 서버는 클라이언트에 HTTP 응답을 보낸다. 이 응답에 요청이 성공했는지 여부를 알려주는 상태 코드와 요청된 자원(e.g. HTML, CSS, JS, 정적 자원 등)이 포함된다.
   
   
5. 클라이언트
   : 클라이언트는 자원을 해석하고 사용자 인터페이스를 렌더링한다.
   
   
6. 사용자 행동
   : 사용자 인터페이스가 렌더링되면 그 인터페이스는 사용자와 상호작용할 수 있으며 전체 과정이 다시 시작된다.
   
   

  하이브리드 웹 애플리케이션을 구축할 때는 라이프사이클에서 작업을 어떻게 분할할 것인지, 네트워크 경계를 어디에 둘 것인지 결정하는 것이 중요하다.

 

 

1-3) 네트워크 바운더리

  웹 개발에서 네트워크 바운더리는 다른 환경을 구분하는 개념적인 선이다. 예를 들어서 클라이언트와 서버, 서버와 DB 간의 경계다.

 

  React 에서는 클라이언트-서버 네트워크 바운더리를 의미 있는 방식으로 설정할 수 있다.

 

  내부적으로 작업은 두 부분으로 나뉜다. 클라이언트 모듈 그래프와 서버 모듈 그래프다. 서버 모듈 그래프는 서버에서 렌더링되는 모든 컴포넌트를 포함한다. 클라이언트 모듈 그래프는 클라이언트에서 렌더링되는 모든 컴포넌트를 포함한다.

 

  모듈 그래프는 애플리케이션의 파일이 어떻게 의존하는지 시각적으로 보여주는 것으로 생각하면 된다.

  

  React 의 "use client" 규칙을 사용해서 바운더리를 정의할 수 있다. 또, "use server" 규칙은 서버에서 일부 계산 작업을 하도록 React 에 지시할 수 있다.

  

---

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

  이런 환경에서 작업할 때 애플리케이션의 코드 흐름이 단방향임을 생각하는 것은 도움이 된다. 응답하는 동안 애플리케이션 코드는 서버에서 클라이언트로 단방향으로 흐른다. 

 

  클라이언트에서 서버에 접근해야 한다면, 같은 요청을 재사용하는 대신 서버에서 새 요청을 보낸다. 이를 통해 컴포넌트를 어디에 렌더링할지, 네트워크 경계를 어디에 둘지 이해하기 쉬워진다.

 

  실제로 이 모델은 개발자들이 서버에서 무엇을 실행할지 먼저 생각하고 그 결과를 클라이언트로 보내어 애플리케이션을 상호 작용할 수 있게 만들도록 한다.

---

Reference

 

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

Building Your Application: Rendering | Next.js