Next.js 13에서 새로 도입한 App Router에서는 모든 컴포넌트가 디폴트로 서버 컴포넌트로 선언됩니다. 서버 컴포넌트는 기존 SSR과 (아예) 다른 개념으로, 페이지 단위가 아닌 컴포넌트 단위로 렌더링을 다르게 할 수 있습니다.
Next.js 공식 문서에서 서버 컴포넌트와 클라이언트 컴포넌트를 선택할 기준을 위와 같이 제공하고 있습니다. 디폴트가 서버 컴포넌트이기 때문에, 클라이언트 컴포넌트로 렌더링하고 싶으면 파일 맨 위에 "use client" 를 선언해야 합니다.
명시적인 use client
개발자 도구의 source 탭을 살펴보면, 클라이언트 컴포넌트들만 들어와 있는 걸 볼 수 있습니다.
Data Fetching Function
Async Server Component
서버 컴포넌트가 상당히 매력적으로 느껴졌었는데, 이는 useEffect와 같이 부자연스러운 동작을 담고 있는 코드를 최대한 배제할 수 있기 때문인 것 같습니다.
또한, 컴포넌트 단위로 서버/클라이언트 렌더링을 선택할 수 있기 때문에, 기존에 루트 페이지에서 모든 데이터를 fetch한 뒤 자식 컴포넌트들에게 prop으로 쏴주는 패턴도 지양할 수 있게 되었습니다.
기본적으로 Next.js가 래핑하는 fetch 함수는 deduping, caching을 모두 제공합니다.
서버 컴포넌트를 쓰는 부모 컴포넌트에서는, React 18에서 도입한 Suspense 컴포넌트로 감싸 스켈레톤을 추가할 수 있습니다.여담으로, vscode typescript 문제인지, 제 tsconfig 문제인지는 모르겠지만 Promise<Element>를 리턴할 수 없어서, 아직까지는 저렇게 ts-ignore를 달아줘야 합니다. 저렇게 해줘도 동작엔 이상 없는 것으로 보입니다.