Inflearn brand logo image
Inflearn brand logo image
채널톡 아이콘

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

작성자 없음

작성자 정보가 삭제된 글입니다.

Next + React Query로 SNS 서비스 만들기

Streaming을 사용하지 않아도 미리 정적인 컴포넌트들을 서버에서 응답을 받습니다

작성

·

57

·

수정됨

0

loading.tsx나 Suspense를 사용했을 때, Next의 Streaming이 동작하여 병렬적으로 미리 준비된 컴포넌트는 사용자의 브라우저에서 먼저 보이게 되고, fetch가 완료된 이후에 서버에서 데이터를 클라이언트로 보내줘서 사용자가 보이는걸로 알고 있습니다.

하지만, 개발자 도구 Network 탭을 확인해본결과 새로고침을 하였을 때, loading.tsx나 Suspense를 사용을 모두 빼고서 prefetchQuery와 HydrationBoundary, useQuery만을 사용했을 시 Streaming 동작 방식처럼 fetch문 실행이 완료되기 전에 미리 NavMenu나 글자 같이 정적인 요소들이 fetch가 끝나기 전에 이미 브라우저에 도착해있는걸 확인하였습니다.

하지만, 딱 한가지 다른 점은 후자 같은 경우는 정적인 컴포넌트가 브라우저에 도착했음에도 화면에 보이질 않고, 전자 같은 경우는 로딩창이나 다른 정적인 요소들은 이미 화면에 미리 보입니다.

그렇다면, Next 15 공식문서에 있는 fetch 실행이 끝날때까지 HTML 파일을 서버 사이드에서 렌더링 하는 것이 Blocking 된다는 논리가 이해가 되질 않습니다. (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming)

위의 코드는 /home의 추천탭을 기준으로 확인하였습니다.

이러한 현상이 발생하는 원인이 무엇인지 알 수 있을까요?

답변 2

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

질문 제목이 이해가 가질 않는데요. 정적인 컴포넌트들은 원래 스트리밍을 사용하지 않으면 바로 화면에 ssr되어 그려집니다. 그리고 NavMenu 부분은 레이아웃에 존재하는 것이라 prefetchQuery나 hydration 등과 관련이 없습니다. 전자랑 후자는 각각 어떤 걸 말씀하시는 건가요?

shcheon님의 프로필 이미지

새로고침을 기준으로 전자 같은 경우는 loading.tsx나 Suspense를 사용했을 때, 로딩창이 보이고, 정적인 요소들도 함께 보이는 경우를 말합니다. (이것은 당연한 결과라서 이해가 됩니다.)
후자의 경우는 loading.tsx나 Suspense를 사용하지 않았을 경우인데, Network 탭을 확인해본결과 Streaming 방식처럼 fetch 실행 완료 전에 이미 정적인 컴포넌트들이 응답으로 들어와 있는데도 불구하고, 화면에 렌더링이 되질 않아 컴포넌트들이 보이지 않는 경우를 의미합니다.

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

suspense를 사용하지 않았으면 레이아웃과 페이지 부분이 동시에 렌더링됩니다. 그래서 레이아웃은 이미 갖고있어도 페이지를 기다리는 것일 것입니다

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다.

loading.tsxSuspense를 사용할 때와 사용하지 않을 때의 행동 차이와 네트워크 동작 방식에 대한 질문을 주셨군요. loading.tsxSuspense 컴포넌트를 사용하면, 이는 Next.js의 Streaming 기능과 함께 작동하면서 서버에서 데이터를 가져오는 동안 브라우저에 로딩 상태를 보여주고, 데이터 로드가 완료되면 UI를 업데이트하는 역할을 합니다.

이와 달리 prefetchQueryHydrationBoundary, useQuery를 사용하는 경우에는 브라우저가 서버와 응답을 주고받는 동안 데이터가 없는 상태에서의 기본 UI가 먼저 렌더링되는 경우가 있습니다. 이는 Next.js에서 서버 컴포넌트가 기본적으로 서버 사이드 렌더링(SSR) 방식으로 작동하기 때문입니다. 따라서, 서버에서 먼저 HTML을 준비해 보내주고, 이후 클라이언트에서 데이터 fetching이 이루어지기 때문에 fetch가 완료되기 전에 서버에서 준비된 정적인 요소들은 이미 클라이언트에 렌더링되기 위한 준비를 마칠 수 있습니다.

이 결과로 loading.tsxSuspense를 사용하지 않은 경우에도 기본적인 SSR을 통해 서버에서 준비된 요소들이 브라우저에 도착하게 되며, 이 방식은 클라이언트 측에서 fetch가 이루어지기 전 일수도 있습니다. 그러나 Suspense를 사용하는 경우, 이는 비동기적으로 UI의 특정 부분을 기다리기 때문에 fetch가 완료될 때까지 로딩 상태를 유지하는 차이가 있습니다.

이 현상은 서버 사이드에서 준비된 UI와 클라이언트 사이드 업데이트 방식의 차이로 설명할 수 있습니다. 질문자님의 의문을 풀어드리기 위해 아래와 같은 관련 정보가 담긴 응답을 확인하실 수 있습니다.

질문의 이해를 돕고 더 나은 학습을 위한 정보가 되길 바랍니다.

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