[Next.js] Next.js를 조금 더 파헤쳐 보았다. - (2)

개요

지난 글에서 Next.js의 대략적인 구조와, CSR과 SSR과 관련해서 이야기해보았다.

오늘은 Rendering에 대해서 조금 더 본질적으로 파악해보려고 한다.

Next.js 공식문서의 Rendering 파트를 참고하였다.

그럼 시~작!

 

Rendering이란?

내가 작성한 코드를 사용자에게 보여주는 것.

어떻게 렌더링 하느냐에 따라 SSR, CSR 방식이 있다. 

 

우리는 오늘 렌더링 환경과 요청-응답 생명주기

그리고 네트워크 바운더리에 대해 이야기해볼 예정이다.

 

Rendering Enviromrnts : Client와 Server

우리가 작성한 코드는 서버와 클라이언트에서 실행할 수 있다.

1. Client : 브라우저에 요청한 서버 속 코드를 보여주고 서버에서 받은 응답을 사용자가 볼 수 있도록 전환한다.
2. Server : 데이터 센터에 저장된 코드를 서버가 컴퓨터에게 제공하고, 클라이언트에서 요청받은 데이터를 적절히 응답한다.

지금까지 개발의 역사를 봤을 때 개발자들은 각기 다른 언어를 사용했다. 

그리고 Server와 Client를 위해 프레임워크를 사용하기도 했다.

리액트를 사용하고 나서 부터는 동일한 언어, 동일한 프레임워크 사용이 가능해졌다.

그래서 특별히 Context를 바꾸지 않아도 양쪽 환경에서 코드를 작성할 수 있게된 것이다.

 

Request-Response Lifecycle : 대체로 같은 흐름

요청-응답 생명주기는 거의 모든 흐름이 비슷하다.

1. 사용자의 행동 : 사용자는 웹과 상호작용한다. 예를 들어 링크를 클릭하거나, 폼 제출, 브라우저에 주소 입력 등.
2. HTTP 요청 : Client는 Server에 HTTP요청을 보낸다. 어떤 자원을 어떤 메소드로 사용할지 함께.
3. Server : 적절한 자원과 함께 요청과 응답을 처리한다. 이 과정은 라우팅, 데이터 패치 등과 한 묶음.
4. HTTP 응답 : 요청을 수행한 후 Server는 HTTP응답을 다시 Client로 보낸다. 이 응답은 상태코드와 요청자원을 포함함.
5. Client : 사용자 인터페이스에 자원을 파싱해 렌더링한다.
6. 사용자의 행동 : 한 번 UI가 렌더링 되면, 사용자는 이것과 상호작용이 가능하다.

그리고 이 전체 과정을 다시 시작하게 된다.

 

하이브리드 웹 어플리케이션에서 가장 중요한 것은,

어떻게 생명주기 안에서 동작을 분리하고,

Network Boundary 장소가 어디에 있냐는 것이다.

 

Network Boundary

웹 개발에서 Network Boundary는 다른 환경과 분리하는 개념적 선이라고 할 수 있다.

예를 들면, Client와 Server 혹은 Server와 Data Store가 있다.

 

리액트에서 가정 적합한 곳에 Client와 Server의 Network Boundary를 저장할 수 있다.

그 작업이 두가지 방식으로 나누게 되는데,

클라이언트 모듈 그래프 방식과 서버 모듈 그래프 방식 이 두가지 형태로 나뉜다.

 

1. 서버 모듈 그래프 : 서버에서 렌더링된 모든 컴포넌트를 포함
2. 클라이언트 모듈 그래프 : 클라이언트에서 렌더링된 모든 컴포넌트를 포함

이는 Next.js내에서 "use client"와 "use server"로 표현이 가능하다.

 

Building Hybrid Applications

이 환경에서 동작할 때, 단방향 흐름에 대해 생각할 수 있다.

다른 말로 얘기하자면, 응답 받는 동안 코드의 흐름은 서버에서 클라이언트로 정해져 있다는 것이다.

 

만약 클라이언트에서 서버에 접근이 필요하다면,

같은 요청을 다시 사용하기 보다 서버에 새로운 요청을 보낸다.

이러한 구조하는 어디서 컴포넌트가 렌더링 되는지,

어디에 Network Boundary가 위치해있든지 이해하기 쉽다.

 

실제로 이 모델은 클라이언트에게 결과를 보내는 것과 상호작용 전에 

개발자에게 서버에서 처음 원하는 실행인지 생각하도록한다.

 

이러한 방식은 우리가 interleave client와 server components가 같은 컴포넌트에서 어떻게 되는지 보면 알것이다.