Next.js의 Suspense VS dynamic

Question

https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#nextdynamic

Lazy Loading을 사용하기 위해서 Next.js에서는 2가지의 방법을 제공하고있습니다.

1. dynamic
2. React.lazy + Suspense

또한, Next 의 Streaming 관련글을 읽다 보니
https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#example

예제에서는 Suspense를 사용한 예제를 보여주는데  위의 예제에서는 dynamic을 사용하지 않고 Suspense를 사용한 이유가 궁금합니다.

처음 링크된 글을 읽었을때는 dynamic 함수가 React.lazy + suspense를 구현함 과 동시에 여러 옵션들을 제공하고 있어서 dynamic 함수가 더 좋다(?) 라고 생각을 하게 되었는데, dynamic과 suspense의 정확한 차이점이 궁금합니다.

정종윤 · Accepted Answer

Next.js의 Streaming 예제 코드에서 dynamic을 사용하지 않은 이유에 대해 질문 주셨군요. 제가 살펴보니 동적 임포트(Dynamic Import)의 경우에는 클라이언트 컴포넌트에서의 지연 로딩을, Suspense의 경우는 서버 컴포넌트에서의 지연 로딩에 각각 적합한 사용법인 듯 합니다.

첫 번째 링크의 문서를 살펴보면 그 근거를 알 수 있는데요, 서버 컴포넌트는 기본적으로 코드 스플리팅(code splitting)이 적용되고 지연 로딩은 클라이언트 컴포넌트에서만 가능하다고 나와 있네요. 심지어 서버 컴포넌트 그 자체를 dynamic 메서드로 로드한다고 해도 서버 컴포넌트 그 자체가 지연 로딩이 되는 게 아니라 내부의 클라이언트 컴포넌트만 지연 로딩 된다고 합니다.

이것은 사실 서버 컴포넌트의 특성을 생각해보면 당연한 것입니다. 서버 컴포넌트는 사용자의 요청에 맞춰 딱 한 번 실행되며, 그 결과물로 하이드레이션 가능한 상태의 페이로드를 만들어내야만 하기 때문이에요. 서버 컴포넌트의 로직은 같은 서버에서 동기적으로 실행되기 때문에 별도의 지연 로딩...? 이랄 것이 필요하지 않아요.

다만 이렇게 생성해야하는 페이로드 자체의 단위가 클 수도 있고, 데이터 패치 같은 비동기 로직이 포함될 수도 있으니 페이로드를 만들어내는 과정에서 시간이 오래 걸릴 수가 있습니다. 이러한 경우에는 서버 컴포넌트를 렌더하는데 오래 걸리는 부분을 Suspense로 잘게 쪼개고 별도의 UI를 띄우기 위해 Suspense로 컴포넌트를 감쌀 수 있겠죠. 이게 두 번째 링크인 Streaming을 통해 가능한 것입니다. (혹시라도 이 부분이 이해하기 어렵다면 서버 컴포넌트와 클라이언트 컴포넌트의 차이에 대해 조금 더 공부가 필요합니다.)