모던 리액트 Deep Dive - 11장

Next.js 13과 리액트 18

app directory의 등장

• 13 버전 이전 페이지
  • _document: 페이지에서 쓰이는 html, body 태그 수정, SSR 시 style 주입
  • _app: 페이지 초기화 용도
• 13 버전
  • layout.js: 주소별 공통 UI 포함 / 웹 페이지 시작에 필요한 공통 코드 삽입
    • children을 props로 받아 렌더링
  • page.js: 리액트 컴포넌트 노출
  • error.js: 공통 에러 컴포넌트
    • 에러 바운더리는 클라이언트에서만 작동 (client component)
    • 루트 에러 처리는 global-error.js로
  • not-found.js: 404 페이지 렌더링
    • 서버 컴포넌트
  • loading.js: Suspense 기반으로 컴포넌트 불러오는 중임을 나타냄
  • route.js: http 메서드 정의

리액트 서버 컴포넌트

• 기존 리액트 컴포넌트와 SSR의 한계
  • 자바스크립트 번들 크기가 0인 컴포넌트를 만들 수 없다.
  • 백엔드 리소스에 대한 직접적인 접근이 불가능하다. (데이터베이스 직접 엑세스 등)
  • 코드 스플리팅이 불가능하다.
  • 연쇄적으로 발생하는 클라이언트와 서버의 요청을 대응하기 어렵다.
  • 추상화에 드는 비용이 증가한다.
• 서버 컴포넌트란?
  • 하나의 언어, 하나의 프레임워크, 하나의 API와 개념을 사용하면서 서버, 클라이언트 모두에서 컴포넌트를 렌더링할 수 있는 기법
  • 요청이 오면 그 순간 딱 한 번 실행될 뿐이므로 상태를 가질 수 없다. (useState, useReducer 등)
  • 렌더링 생명주기를 사용할 수 없다. (useEffect 등)
  • 서버에서만 실행되기 때문에 DOM API, window, document 등에 접근할 수 없다.
  • 데이터베이스, 내부 서비스 등 서버에만 있는 데이터를 async/await으로 접근할 수 있다.
  • 다른 서버 컴포넌트, 엘리먼트, 클라이언트 컴포넌트를 렌더링할 수 있다.
• 서버 컴포넌트와 서버 사이드 렌더링의 차이
  • SSR
    • 응답받은 페이지 전체를 HTML로 렌더링하는 과정을 서버에서 수행 → 결과를 클라이언트에 전달
    • 이후 하이드레이션 과정을 거쳐 결과물 확인, 이벤트 붙이는 등의 작업 수행
  • 서버 컴포넌트
    • 번들 0 → 하이드레이션 불필요
    • HTML이 아닌 JSON
• 서버 컴포넌트 작동 방식
  • 서버가 렌더링 요청을 받는다.
  • 서버는 받은 요청에 따라 컴포넌트를 JSON으로 직렬화한다.
    • 서버에서 렌더링할 수 있는 것은 직렬화
    • 클라이언트 컴포넌트로 표시된 부분은 플레이스홀더 형식으로 비워둠
  • 브라우저는 이 결과물을 역직렬화 후 렌더링 수행
  • 브라우저가 리액트 컴포넌트 트리 구성 → 브라우저 DOM에 커밋
• 서버 컴포넌트 작동 방식의 특별한 점
  • 스트리밍 형태로 전달 → 결과물을 보다 빠르게 보여줄 수 있다.
  • 컴포넌트들이 하나의 번들러 작업에 포함돼 있지 않고 별개로 되어 있다.
  • SSR과 다르게 HTML이 아닌 JSON 형태로 보내진다.
• 새로운 fetch 도입
  • 브라우저 네이티브 fetch API 확장 → 컴포넌트 트리 내 동일한 요청이 있다면 재요청 방지 (캐싱)
• 정적 렌더링과 동적 렌더링
  • 13에서는 정적 라우팅에 대해 기본적으로 빌드 타임에 렌더링을 미리 해두고 캐싱해 재사용할 수 있게끔 해뒀다.
  • 동적 라우팅은 서버에 매번 요청이 올 때마다 컴포넌트를 렌더링하도록 변경했다.
• 스트리밍을 활용한 점진적인 페이지 불러오기
  • 전체 페이지를 한 번에 그리는 것이 아닌 부분 단위로 준비되는 것부터 렌더링
  • loading.js 또는 Suspense 배치
• 서버 액션
  • API를 생성하지 않고 함수 수준에서 서버에 직접 접근해 데이터 요청 등을 수행
  • use server
  • only async function
  • 서버 액션은 클라이언트 컴포넌트 내에서 정의될 수 없다.
  • 서버 액션을 import하는 것뿐만 아니라 props 형태로 서버 액션을 클라이언트 컴포넌트에 넘기는 것 또한 가능하다.