반응형
1. Rendering
- Rendering은 작성한 코드가 UI로 변환되는 과정을 의미.
- React와 Next.js는 코드가 Server 혹은 Client에서 렌더링될 수 있는 하이브리드 웹 애플리케이션을 지원.
1-1. Fundamentals
- 시작하기에 앞서, 익숙해지면 좋은 web의 기본적인 컨셉.
- 코드가 실행될 수 있는 환경은 Server와 Client이다.
- 사용자가 방문하거나 상호작용을 통해 요청과 응답 생명주기가 시작된다.
- 네트워크 경계를 통해 Server와 Client 코드를 구분한다.
1. Rendering Environments
- 웹 애플리케이션에서 Client와 Server에서 렌더링이 가능하다.
- Client는 애플리케이션 코드에 대한 요청을 서버로 보내고 UI를 받는 사용자 장치의 브라우저를 의미.
- Server는 애플리케이션 코드가 저장되어 Client의 요청을 받고 적절한 응답을 보내는 컴퓨터를 의미.
- 과거에는 Client와 Server에서 다른 언어를 사용해야 했지만, React와 Next.js를 사용해서 비슷하게 코드를 작성하고 context switching이 발생하지 않는다.
- 그러나, 각 환경은 자신들만의 기 및 제약이 있으므로 완전히 똑같을 수는 없으며, 특정 작업이 적합한 환경이 존재한다. (ex. Data Fetching, 사용자 상태 관리)
2. Request-Response Lifecycle
- 대체로 모든 웹 사이트들이 동일한 요청-응답 생명주기를 따른다.
- 사용자 상호작용 : 사용자가 웹 애플리케이션과 상호작용.
- HTTP Request : Client에서 HTTP를 통해 Server에게 필요한 정보를 요청.
- Server : Server는 요청에 따라 적절한 응답을 내려준다.
- HTTP Response : 요청에 대한 처리 후, Server는 HTTP 응답을 Client에게 돌려준다.
- Client : Client는 정보를 변환하여 UI에 렌더링 한다.
- User Action : 사용자는 렌더링이 완료되면 그것과 상호작용할 수 있고, 위 과정이 반복.
- 하이브리드 웹 애플리케이션을 구축하는 데 있어 중요한 건 생명주기에서 작업을 어떻게 구분하고 네트워크 경계를 어디에 둘 지 결정하는 것.
3. Network Boundary
- 웹 개발에서 네트워크 경계는 서로 다른 환경을 구분하는 개념적 선.
- 예를 들어, Client - Server - Data Store.
- React에서는 Client-Server의 네트워크 경계를 합리적인 위치에 두는 것을 선택해야 한다.
- 백 그라운드에서 작업은 두 가지로 나뉜다.
- client module graph : Client에서 렌더링되는 모든 컴포넌트를 포함.
- server module graph : Server에서 렌더링되는 모든 컴포넌트를 포함.
- "use client" 컨벤션을 활용해 경계를 정의할 수 있고, "use server" 컨벤션을 사용하면 서버에서 작업이 필요하다는 것을 React에 알릴 수 있다.
1-2. Building Hybrid Applications
- 이러한 환경에서 작업할 때, 코드 흐름을 단방향으로 생각하는 것이 도움이 됨.
- 만약, Client에서 Server에 접근하고 싶다면, 새로운 요청을 서버에 보내야 한다. 이렇게 하면 컴포넌트를 어디에서 렌더링시켜야 할 지 이해하기 쉽고 네트워크 경계를 배치하기 쉽다.
- 서버에서 뭘 처리해야 하는 지를 먼저 생각하면, 동일 컴포넌트 트리에서 Server와 Client 컴포넌트를 어떻게 섞어야 할 지 이해가 갈 것이다.
처음 뵙겠습니다.
Next.js 사용하면서 처음 본 개념이거나, 이해하기 어려운 부분(?)은 붉은색 볼드처리 해봤다.
Preference
Building Your Application: Rendering | Next.js
Learn the differences between Next.js rendering environments, strategies, and runtimes.
nextjs.org