Rendering
Rendering은 내가 작성한 코드를 유저 인터페이스로 변환한다.
React와 Next.js는 코드 일부를 서버 또는 클라이언트로 렌더링할 수 있는 하이브리드 웹 애플리케이션을 생성해준다.
기초 지식
- 애플리케이션 코드는 server 또는 client 환경에서 실행될 수 있다.
- Request-Response Lifecycle은 유저가 애플리케이션에 방문하거나 상호작용할 때 시작된다.
- Network Boundary는 server와 client 코드를 분리한다.
Rendering 환경
웹 애플리케이션이 렌더링될 수 있는 환경이 2가지가 있다.
1. client
- 서버에 애플리케이션 코드를 요청한다.
- 서버로부터 유저 인터페이스로 응답이 돌아온다.
- server
- 애플리케이션 코드를 저장 중인 데이터센터 있는 컴퓨터를 의미한다.
- 클라이언트로부터 요청을 받고 적절한 응답을 반환한다.
역사적으로, 개발자는 서버와 클라이언트 코드를 작성할 때 다른 언어와 프레임워크를 사용해왔다.
React를 사용하면서 개발자는 같은 언어와 같은 프레임워크를 사용할 수 있게 되었다.
이 유연성은 context switching 없이 두 환경 모두에게 비슷하게 코드를 작성할 수 있다.
하지만 각각의 환경은 자기만의 기능과 제약사항을 가진다. 그렇기에 서버와 클라이언트 코드가 항상 같지 않다. 어느 한 환경에 알맞는 연산이 있다.
Request-Response Lifecycle
널리 알려진 Request-Response Lifecycle은 다음과 같다:
1. User Action
- 링크를 클릭하거나, 폼을 제출하거나, 브라우저 주소창에 URL을 직접적으로 타이핑하는 것처럼 유저는 웹 애플리케이션과 상호작용한다.
- HTTP Request
- 클라이언트가 서버로 HTTP 요청을 보낸다. 요청한 자원에 대한 필수적인 정보를 포함해서 보낸다.
- GET, POST 메소드가 사용된다.
- 필요하면 추가 정보도 함께 붙인다.
- Server
- 서버는 요청을 처리하고 적절한 자원을 응답한다.
- routing, fetching data 등의 단계를 거친다.
- HTTP Response
- 요청이 처리된 후에 서버는 클라이언트에게 HTTP 응답을 보낸다.
- 이 응답은 status code와 요청된 자원을 포함하고 있다.
- 클라이언트
- 클라이언트는 받은 리소스를 유저 인터페이스에 렌더하기 위해 파싱한다.
- 유저 액션
- 유저 인터페이스가 렌더되고 나면, 유저는 상호작용할 수 있고 모든 과정이 다시 시작된다.
하이브리드 웹 애플리케이션을 만드는 중요한 부분은 라이프사이클에서 작동을 어떻게 분리할지를 결정하는 것이고 네트워크 바운더리를 어디에 둘 것인가를 결정하는 것이다.
Network Boudary
- 다른 환경을 분리하는 개념적인 선이다.
리액트에서, 가장 알맞은 곳으로 클라이언트-서버 네트워크 바운더리를 둘 곳을 정할 수 있다.
작동은 두 가지 부분으로 분리된다.:
- client module graph
- server module graph
서버 모듈 그래프는 클라이언트에게 렌더되는 모든 컴포넌트를 포함한다.
바운더리를 설정하는 데에 "use client"를 사용할 수 있다.
"use server"도 사용 가능하다.
Building Hybrid Applications
애플리케이션의 코드 흐름이 단방향으로 생각하면 도움이 된다!
-> 응답하는 동안 코드는 서버에서 클라이언트로 간다.
클라이언트로부터 서버에 접근해야할 때 같은 요청을 재사용하기 보다는 서버로 새로운 요청을 보낸다.
개발자가 결과를 클라이언트에게 보내고 애플리케이션을 인터랙티브하게 만들기 전에 서버에서 실행할 것을 권장한다.
