인프런 커뮤니티 질문&답변

아 넵 답변 감사합니다!! 그러니까 Searbar component가 사전렌더링에서 완전 배제되는 이유는 suspense 때문이 아닌 useSearchParams 훅 때문인 거군요! suspense는 뒤에 강의에서 나온대로 fallback을 통해 대체 html을 보여줄 수 있고 데이터를 순차적으로 전달해준다고 그대로 이해하면 되겠네요

안녕하세요 이정환입니다.

결론부터 말씀드리면 Searchbar 컴포넌트의 경우 클라이언트 사이드 렌더링으로 화면에 나타나지만, Suspense로 감싼 모든 컴포넌트들이 그렇게 동작하는건 아닙니다.

Searchbar 컴포넌트의 경우 애초에 클라이언트 컴포넌트이며, 또 Suspense 컴포넌트를 대기시키는 useSearchParams가 클라이언트 사이드 렌더링이 완료된 이후에 동작을 마치는 비동기 함수이기 때문에 딱 이 상황에는 Searchbar 컴포넌트가 서버 측 렌더링 과정에서는 아예 배제된다고 이해하시면 될 것 같습니다.

만약 Searchbar 같은 클라이언트 컴포넌트가 아니라 백엔드 서버로부터 특정 데이터를 불러오는 서버 컴포넌트를 Suspense로 감싼다면 이 컴포넌트는 초기 접속 시에 진행되는 사전 렌더링 과정에서는 배제(fallback Props로 전달된 HTML로 대체)되지만, 이후에 서버측에서 비동기적으로 렌더링을 진행하여 결과를 RSC Payload 형태로 보내주게 됩니다.

즉 정리하자면 Seachbar 컴포넌트의 경우, 클라이언트 사이드에서만 작업이 완료되는 useSearchParams 라는 Hook을 호출하고 있기 때문에 서버측에서는 절대 이 작업을 완료할 수 없습니다. 따라서 이 경우에만 클라이언트 측에서 렌더링 됩니다.

안녕하세요, 인프런 AI 인턴입니다. JIN LEE님께서 Suspense와 관련된 질문을 주셨군요. 이 주제는 Next.js에서의 렌더링과 관련된 중요한 개념입니다.

Suspense와 Next.js의 렌더링 원칙

Next.js에서의 Suspense는 비동기적으로 데이터를 가져올 때 로딩 상태를 처리하는 데 도움을 줍니다. 특정 컴포넌트를 Suspense로 감싼다는 것은 그 컴포넌트의 렌더링이 데이터를 기다리는 동안 지연될 수 있음을 의미하되, 이는 CSR(클라이언트 사이드 렌더링) 방식으로 전환되는 것은 아닙니다.

다만, Suspense로 감싼 컴포넌트는 사전 렌더링 시점에서 데이터 로딩이 완료되지 않았기 때문에 해당 부분은 사전 렌더링에 포함되지 않습니다. 이로 인해 이러한 특정 부분은 CSR 방식처럼 동작할 수도 있습니다. 하지만 전체 페이지가 CSR로 전환되지 않고, 단지 해당 컴포넌트가 CSR처럼 클라이언트에서 데이터를 로드하고 렌더링하게 됩니다.

사전 렌더링과 Dynamic/Static 페이지의 차이

• 정적 페이지(Static Page): 빌드 시에 사전 렌더링하여 생성된 HTML 파일이 저장되어 클라이언트 요청 시 사용됩니다. Suspense로 감싸지 않은 부분이 주로 여기 해당합니다.
  
• 동적 페이지(Dynamic Page): 요청 시점에 서버에서 렌더링됩니다. Suspense로 감싸진 컴포넌트는 이 범주에 더 가깝게 동작하여 레이아웃의 일부가 클라이언트 렌더링으로 처리될 수 있습니다.
  

요약하면, Suspense를 사용하는 경우에도 Next.js의 효율적인 렌더링 방식을 최대한 활용하면서 필요한 부분만 CSR로 동작하도록 만들 수 있는 것입니다.

JIN LEE님께서 궁금해하셨던 부분에 대한 Justin Pearse의 대답도 참조하시면 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.