Next13) App Router와 Server Component

App Router

app router 폴더 구조

 

• app 폴더 하위에 모든 파일 추가
• 폴더명으로 경로를 정의하며, page.js 또는 route.js로 작성된 파일만 경로로 활용 가능
• layout.tsx
  • 이 파일은 최상위 레이아웃으로 모든 페이지에 공유됨
  • pages router의 _app.js를 대체한다.
• page.tsx
  • 웹 애플리케이션의 시작점이자, 루트 / 경로 페이지

---

Server Component

무엇이 서버 컴포넌트인가?

• 컴포넌트가 서버에서 렌더링이 되고 클라이언트에 html로 전송되는 것
• 특징
  1. 리렌더링이 되지 않는다.
  2. 서버 리소스에 접근 가능하다(서버 시스템, db)
  3. js 번들에 포함되지 않는다.(제로 번들 사이즈)
  4. 자동 코드 스플릿팅 → lazy로 명시할 필요 x
  5. 유저 인터랙티비티(useState, useEffect 등) 제공 불가

ssr과의 차이점

• ssr !== 서버 컴포넌트
• ssr
  • 페이지 단위로 초기 html 생성하고 보냄
  • 모든 컴포넌트의 코드가 js 번들에 포함
  • 최상위 페이지에서만 getServerProps()로 백엔드 db에 접근 가능
  • 서버에서 렌더링을 하고 html을 받아와서 state 보존 불가능
• 서버 컴포넌트
  • 컴포넌트를 js 번들에 포함되지 않게 서버에서 실행 가능
  • 페이지 단위보다 작은 컴포넌트 단위로 보내줌
  • 해당 컴포넌트의 코드가 js 번들에 포함되지 않음
  • 페이지 레벨 상관없이 컴포넌트에서도 백엔드 db에 접근 가능
  • RSC paylod라는 방식으로 html을 받아와서 state 보존 가능
• 하지만 서버 컴포넌트가 ssr의 대체자는 아니다
  • ssr의 초기 렌더링 + 서버 컴포넌트의 제로 번들링을 합쳐서 사용하면 효율적

서버 컴포넌트 활용법

• 아쉽게도 단일한 리액트만으로는 서버 컴포넌트를 사용하기 쉽지 않다.
• next 13버전에서 stable 된 app router에서 서버 컴포넌트를 이용하는 것이 효과적이다.
  • next 13의 app router에서 모든 컴포넌트는 기본적으로 서버 컴포넌트이다.
  • hooks 같은 인터랙티비티를 사용하여 클라이언트 컴포넌트를 구현하고 싶으면 ‘use client’를 사용하면 된다.
    1. use client의 의미는 hydration 되길 원한다는 의미
    2. hydration은 수분을 공급한다는 의미로 건조한 html에 js라는 수분을 준다는 의미
  • 어떤 기준으로 서버/클라이언트 컴포넌트를 나눌까?
    1. 모든 컴포넌트가 서버 컴포넌트인게 best이지만 현실적으로 쉽지 않다.
    2. 따라서 상태, 이펙트가 있으면 클라이언트 컴포넌트로 사용하고, 나머지는 서버 컴포넌트로 사용하면 된다.
• boundaries(경계)
  • 클라이언트 컴포넌트가 import 하는 컴포넌트는 반드시 클라이언트 컴포넌트여야 한다.
    1. 왜냐하면 하위 컴포넌트가 서버 컴포넌트이면, 상위 컴포넌트가 리렌더링 되어도 하위 컴포넌트는 리렌더링이 되지 않는다.
    2. 이것은 서버 컴포넌트에서의 제약 조건이다

해결법

- 해결 전

 

-해결 후

• 이런 식으로 컴포넌트에서 유저 인터랙티비티(useState, useEffect 등) 부분을 분리하면 해결이 된다.
• 여기선 부모/자식이 중요한 것이 아니라 import 하는 컴포넌트에 집중하기에 이런 해결법이 가능하다.

-출처

https://www.inflearn.com/course/next-react-query-sns%EC%84%9C%EB%B9%84%EC%8A%A4/dashboard

Next + React Query로 SNS 서비스 만들기 강의 - 인프런

https://www.youtube.com/watch?v=vjBQks_tjOA