캐치 올 세그먼트
books/1/1 와 같은 중첩된 파라미터의 경우 [...id] 형식으로 폴더 생성
주의: books 경로와 같이 파라미터가 존재하지 않는 경우는 404 페이지 반환
해결법: 옵셔널 캐치 올 세그먼트로 [[...id]] 형식으로 폴더 생성
Layout
Layout 의 경우 아래 이미지와 같이 하위 경로에 대해서는 중첩 적용 된다
Route Group
(with-searchbar) 와 같은 형식으로 폴더 생성
경로상에는 아무런 영향 끼치 않으며 Layout 에 대해 동일한 적용이 가능
React Server Component
Page Router 에서 JS Bundle 에 상호작용이 필요없는 JS 파일들도 같이 포함되어
브라우저에서 한번 더 실행 될 필요 없다고 느낌
그래서 상호작용이 필요한 컴포넌트만 JS Bundle 에 포함시키자
그러면 Bundle 용량도 줄고 TTI 시간도 단축되지 않을까?
대부분의 페이지를 서버 컴포넌트로 생성하자
- 서버 컴포넌트: 서버 측 사전렌더링 시에만 딱 1번 실행
- 클라이언트 컴포넌트: 서버 측 사전렌더링 및 하이드레이션 때 실행되어 총 2번
클라이언트 컴포넌트에서 서버 컴포넌트는 import 할 수 없다
이유는 위에 설명했듯이 JS Bundle 에는 상호작용에 필요한 파일만 있고,
Bundle 파일로 하이드레이션 과정을 거치고 한번 더 클라이언트 컴포넌트가 호출될텐데
여기서 import 된 서버 컴포넌트는 Bundle 에 포함되어 있지 않으므로
이런 문제가 빈번히 발생하다보니 Next 에서는 import 된 서버 컴포넌트의 경우 자동으로 클라이언트 컴포넌트로 변환함
편법: 클라이언트 컴포넌트에서 children 형식으로 서버 컴포넌트 받으면 문제 없음
서버 컴포넌트에서 클라이언트 컴포넌트로 직렬화 되지 않은 props 는 전달 불가능
함수와 같은 직렬화 불가능한 값은 props 로 전달이 안된다
서버에서 사전렌더링 되는 방식을 좀 더 살펴보자면
서버 컴포넌트만 우선 RSC Payload 형식으로 변환됨
RSC Payload 는 직렬화된 데이터로 되어있음
이 과정에서 함수도 직렬화되어있을텐데 함수는 직렬화로 표현 안되므로 에러
※ RSC Payload
- React Server Component 의 순수한 데이터 (직렬화한 결과물)
- 서버 컴포넌트 렌더링 결과(마크업과 유사한)만 포함되어 있어 결과물 안에 서버 코드는 노출 x
- 연결된 클라이언트 컴포넌트들의 위치 포함
- 클라이언트 컴포넌트에게 전달하는 props 값 포함
페이지 이동의 경우 Network탭
최초 페이지 접근하여 사전 렌더링시 서버 컴포넌트 먼저 실행되어 RSC Payload 값으로 변환되고,
클라이언트 컴포넌트 실행된 결과값과 합쳐져 html 페이지 생성되고 클라이언트로 전달
이후 하이드레이션을 위해 JS Bundle 추가로 클라이언트로 전달
다른 경로로 이동 시 index.html 파일을 또 생성하여 주는게 아닌
이동하는 페이지의 RSC Payload 와 JS Bundle 을 서버로부터 받아 CSR 처럼 렌더링해줌
테스트는 빌드 파일로 해야 확인 가능
<Link/>, router.~(프리페칭이 적용 안되어있다면)
링크 눌러서 해당 페이지로 이동할 때 RSC Payload, JS Bundle 받아옴
(프리페칭 적용 되어있다면)
링크 누르기 전에 이미 링크에 해당하는 페이지들이 Static 인 경우 RSC Payload, JS Bundle 받아옴
Dynamic 인 경우 RSC Payload 만 받고 페이지 이동 하고 나서 JS Bundle 받음
