Server Component와 Clinent Component에 대해서 먼저 알아봤는데, 사실 그것보다 더 먼저 Rendering에 대해서 이해하고 넘어갔어야 했는데 그러지 못한거 같다는 생각이 들었다.
그래서 Rendering에 대해서 빠르게 짚고 넘어가보자!
Rendering
렌더링은 작성한 코드를 유저 인터페이스로 바꾸는걸 의미한다.
React 그리고 NextJS를 사용하면 작성한 코드의 일부가 서버나 클라이언트에서 렌더링될 수 있는 하이브리드 Application을 만들 수 있다.
따라서 두개의 다른 환경에 대한 차이를 알아보자~
기초!
시작하면서 이해를 돕기위해 세가지 다른 기초적인 컨셉을 알아보자.
-
Application 코드가 실행될 수 있는 환경은 크게 2가지로 하나는 서버, 나머지 다른 하나는 클라이언트다.
-
Reqeuest-Response Life Cycle은 사용자가 Application을 방문하거나 상호작용 할때 시작된다.
-
Network Boundary는 서버와 클라이언트 코드를 구분한다.
렌더링 환경
웹 어플리케이션이 렌더링되기 위해서는 두개의 서로다른 환경이 있는데, 하나는 클라이언트 그리고 나머지는 서버다.
클라이언트
Application 코드에 대한 요청(Request)을 서버에 보내는 사용자의 장치(Uses's Device)의 브라우저를 의미한다.
그런 다음 서버의 응답(Response)을 유저 인터페이스로 스스로 전환한다.
서버
서버는 Application 코드를 저장하고, 클라이언트로 부터 요청(Request)을 받고 적절한 응답(Response)을 다시 내보내는 데이터 센터의 컴퓨터를 의미한다.
Request-Response Lifecycle
1. User Action
사용자는 웹 Application과 상호작용을 한다.
여기서 말하는 상호작용(Interaction)은 링크를 클릭하거나, 양식(Form)을 제출하거나, 브라우저의 주소 표시줄에 직접 URL을 입력하는등등의 행위를 의미한다.
2. HTTP Request
클라이언트는 HTTP Requests를 서버에게 보내는데, 이때 필수적으로 필요한 정보 또는 추가적인 데이터를 포함해서 보낸다. (Ex: GET, POST Request)
3. Server
서버는 요청(Request)을 처리하고 적절한 리소스로 응답(Response)을 한다.
이때 라우팅이나, 데이터를 갖고오는등의 몇가지 단계를 거칠 수 있다.
4. HTTP Response
요청(Request)을 처리한 후 서버는 HTTP 응답(Response)를 클라이언트로 다시 보낸다.
이때 응답에는 상태코드(클라이언트의 요청이 성공했는지 실패했는지에 대한 상태값)와 요청했던 리소스들을 포함한다. (HTML, CSS, JsvaScript, 그외 다른 자산(이미지, 로고 등등))
5. Client
클라이언트는 리소스를 파싱해서 유저 인터페이스를 렌더링 한다.
6. User Action
유저 인터페이스가 렌더링되면 사용자는 인터페이스와 상호작용을 할 수 있고, 전체 프로세스가 다시 시작된다.
여기서 말하는 전체 프로세스는 위의 1단계 부터 6단계를 의미함!
Defining Routes
서버 컴포넌트, 클라이언트 컴포넌트를 정리할때 route가 계속 나오는데 나는 머리로는 알고는 있는데 설명하기가 조금 껄끄러워서 문서를 찾아봤다.
그리고 설명을 못하면 제대로 아는게 아니라고 생각해서 문서를 뒤저보다가, 적절한 짤이 하나 있어서 가지고 왔다.
NextJS는 기본적으로 폴더를 사용해서 경로(URL)를 정의하는 파일 시스템 기반의 라우터를 사용한다.
따라서 각각의 폴더는 URL로 매핑되는 경로 세그먼트를(route segment) 의미하는데, 중첩된 경로를 만들고 싶다면 폴더를 서로 중첩하면 된다.
여기서 말하는 중첩은 A폴더 내부에 B라는 폴더를 또 생성하라는 소리다.
그리고 App Route에서 page.tsx파일은 경로 세그먼트에서 공개적으로 접근이 가능하도록 사용된다.
위 예시에서 /dashboard/analytics URL에는 page.js 파일이 없기 때문에 공개적으로 접근이 불가능한 URL이다.
따라서 /dashboard/analytics 폴더에는 Style Sheet나 다른 공통 컴포넌트 혹은 공통 리소스들을 위치시켜 동일한 경로에 위치한 다른 파일들에서 사용할수 있도록 할수있다.
간단하게 말해서 Route는 URL을 의미한다고 보면되고, 이 URL은 NextJS에서는 파일과 폴더 구조의 집합이다.
그리고 page.js or page.tsx 파일이 있어야만 공개적으로 접근이 가능한 URL이고, page.tsx 파일이 없다면 그냥 단순한 폴더처럼 사용이 가능하다.
추가적으로 (폴더이름) 이렇게 폴더를 만들면 그룹으로 만들 수 있고, [변수이름] 이렇게 폴더를 만들면 Dynamic Route가 가능하다.
필요하면 아래 문서를 찾아보자.
