기초적인 컨셉

<aside> 🧪 환경 : 애플리케이션 코드는 서버와 클라이언트 환경 에서 실행 될수있다.

요청-응답 라이프 사이클 : 유저의 방문 또는 상호작용할때 요청-응답 생명주기를 가지고 있다.

네트워크 경계 : 클라이언트, 서버의 네트워크 경계를 선택 할 수 있다.

</aside>

1. 환경

• 웹앱이 렌더링 될 수있는 환경은 클라이언트 와 서버 가 있다.
• 클라이언트는 유저의 요청을 서버에게 요청하여 응답 받아 UI 로 보여주는것
• NextJS 에서는 Server Components 와 Client Components 로 환경을 구분 할 수있다.

2. 요청-응답 생명주기

• 유저 액션 → HTTP 요청 → 서버 요청에 적절한 자원 처리 → 서버 HTTP 응답 → 브라우저 UI 업데이트 의 과정을 거친다.
• 이런 일련의 과정을 어떤 네트워크경계에서 사용할것인지 구분하여 성능을 높인다.

3. 네트워크 경계

• 보통 웹개발에서 네트워크 경계는 서로 다른 환경을 구분하는 개념적 선 이다.
• NextJS 에서는 서버 네트워크와 클라이언트 네이트워크의 구분을 use server , use client 디렉티브를 사용함으로써 구분한다.
• NextJS 에서는 전통적인 웹 개발과는 다르게 하이브리드 웹 개발을 위해 네트워크 경계를 선언하여 적절한 요소에 혼합하여 쓰이므로 UX 와 성능을 높인다.

서버 컴포넌트

• 서버 렌더링 전략에는 Static Rendering , Dynamic Rendering , Streaming 이 있다.
• NextJS 에서는 기본값으로 서버컴포넌트 중에서도 Static Rendering 을 사용한다.

서버 컴포넌트의 렌더링 종류

1. Static rendering

• 빌드 타임때 렌더 된다.
• 캐시 된다.