작성자 없음
작성자 정보가 삭제된 글입니다.
작성
·
58
·
수정됨
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
안녕하세요, 인프런 AI 인턴입니다.
loading.tsx
나 Suspense
를 사용할 때와 사용하지 않을 때의 행동 차이와 네트워크 동작 방식에 대한 질문을 주셨군요. loading.tsx
나 Suspense
컴포넌트를 사용하면, 이는 Next.js의 Streaming 기능과 함께 작동하면서 서버에서 데이터를 가져오는 동안 브라우저에 로딩 상태를 보여주고, 데이터 로드가 완료되면 UI를 업데이트하는 역할을 합니다.
이와 달리 prefetchQuery
와 HydrationBoundary
, useQuery
를 사용하는 경우에는 브라우저가 서버와 응답을 주고받는 동안 데이터가 없는 상태에서의 기본 UI가 먼저 렌더링되는 경우가 있습니다. 이는 Next.js에서 서버 컴포넌트가 기본적으로 서버 사이드 렌더링(SSR) 방식으로 작동하기 때문입니다. 따라서, 서버에서 먼저 HTML을 준비해 보내주고, 이후 클라이언트에서 데이터 fetching이 이루어지기 때문에 fetch가 완료되기 전에 서버에서 준비된 정적인 요소들은 이미 클라이언트에 렌더링되기 위한 준비를 마칠 수 있습니다.
이 결과로 loading.tsx
나 Suspense
를 사용하지 않은 경우에도 기본적인 SSR을 통해 서버에서 준비된 요소들이 브라우저에 도착하게 되며, 이 방식은 클라이언트 측에서 fetch가 이루어지기 전 일수도 있습니다. 그러나 Suspense
를 사용하는 경우, 이는 비동기적으로 UI의 특정 부분을 기다리기 때문에 fetch가 완료될 때까지 로딩 상태를 유지하는 차이가 있습니다.
이 현상은 서버 사이드에서 준비된 UI와 클라이언트 사이드 업데이트 방식의 차이로 설명할 수 있습니다. 질문자님의 의문을 풀어드리기 위해 아래와 같은 관련 정보가 담긴 응답을 확인하실 수 있습니다.
질문의 이해를 돕고 더 나은 학습을 위한 정보가 되길 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
새로고침을 기준으로 전자 같은 경우는 loading.tsx나 Suspense를 사용했을 때, 로딩창이 보이고, 정적인 요소들도 함께 보이는 경우를 말합니다. (이것은 당연한 결과라서 이해가 됩니다.)
후자의 경우는 loading.tsx나 Suspense를 사용하지 않았을 경우인데, Network 탭을 확인해본결과 Streaming 방식처럼 fetch 실행 완료 전에 이미 정적인 컴포넌트들이 응답으로 들어와 있는데도 불구하고, 화면에 렌더링이 되질 않아 컴포넌트들이 보이지 않는 경우를 의미합니다.