Streaming을 사용하지 않아도 미리 정적인 컴포넌트들을 서버에서 응답을 받습니다
118
작성자 없음
작성한 질문수 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 등과 관련이 없습니다. 전자랑 후자는 각각 어떤 걸 말씀하시는 건가요?
0
새로고침을 기준으로 전자 같은 경우는 loading.tsx나 Suspense를 사용했을 때, 로딩창이 보이고, 정적인 요소들도 함께 보이는 경우를 말합니다. (이것은 당연한 결과라서 이해가 됩니다.)
후자의 경우는 loading.tsx나 Suspense를 사용하지 않았을 경우인데, Network 탭을 확인해본결과 Streaming 방식처럼 fetch 실행 완료 전에 이미 정적인 컴포넌트들이 응답으로 들어와 있는데도 불구하고, 화면에 렌더링이 되질 않아 컴포넌트들이 보이지 않는 경우를 의미합니다.
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와 클라이언트 사이드 업데이트 방식의 차이로 설명할 수 있습니다. 질문자님의 의문을 풀어드리기 위해 아래와 같은 관련 정보가 담긴 응답을 확인하실 수 있습니다.
질문의 이해를 돕고 더 나은 학습을 위한 정보가 되길 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
캡처링부분 질문있습니다.
0
76
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
111
2
css 라이브러리 추천 부탁드립니다
0
141
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
133
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
119
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
172
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
110
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
84
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
125
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
103
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
66
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
132
2
next.js 에서 로그인에 관하여
0
139
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
98
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
85
2
vanilla-extract 못찾는 문제
0
230
2
fetch 캐싱과 revalidate 관련
0
85
2