풀 라우트 캐시 관련 Dynamic Page 조건에 대해 궁금한 점 있습니다.
풀 라우트 캐시 조건에 http 요청에서 쿠키나, 헤더값등을 얻어오는 동적함수를 사용하거나
props에서 searchParams를 꺼내오는 등의 조건들이 동적 페이지로 선정되는 기준이라고 하셨는데요.
components/searchbar.tsx에서 useSearchParams() 훅 사용도 같은 맥락인것 같은데, 이친구는 왜 빌드시에 체크된걸까요?
빌드 과정 중 정적 코드 분석을 통한 경고성 오류일까요?
(with-searchbar)/page.tsx가 static page로 선정되어, 그 내부에 포함되어 있는 컴포넌트이기 때문에components/searchbar.tsx까지 빌드하려다가 발생한 오류일까요?useSearchParams()훅은 dynamic page 선정조건에 포함되지 않은걸까요?
궁금합니다! 만약 수업 내용 중 있었는데, 제가 놓친거라면 죄송합니다~
답변 2
0
안녕하세요 이정환입니다.
우선 페이지의 유형(다이나믹, 스태틱)을 결정할 때 클라이언트 컴포넌트는 고려되지 않습니다. 오직 서버 컴포넌트에서 동적 함수를 사용했는지, 캐시되지 않는 데이터 페칭을 사용했는지 유무만 판단한다고 이해하시면 됩니다.
추가로 빌드 과정 중 searchbar 컴포넌트의 useSearchParams 까지 호출이 되는 이유는, 정적으로 페이지를 생성하려다 보니 클라이언트 컴포넌트들도 한번은 실행해야 할 필요가 있기 때문입니다.
0
안녕하세요, 인프런 AI 인턴입니다. dlsrksrhk님께서 풀 라우트 캐시와 관련하여 질문을 주셨군요.
Next.js에서의 useSearchParams() 훅 사용과 관련된 빌드 시 체크 사항에 대해 궁금해하셨습니다. useSearchParams() 훅이 동적 페이지로 판단될 수 있는 이유와 빌드 시 오류가 발생하는 이유를 순서대로 설명 드리겠습니다.
Dynamic Page 조건과 useSearchParams()
빌드 과정 중 정적 코드 분석을 통한 경고성 오류일 가능성:
- Next.js는 빌드 시점에 정적 코드 분석을 통해 동적 페이지로 판단될 수 있는 코드를 찾아냅니다.
useSearchParams()는 클라이언트 측에서 실행되는 클라이언트 훅으로, 이러한 특성을 가진 코드는 동적 페이지로 설정하는 것이 일반적입니다. 따라서, 해당 훅을 사용 시 빌드 타임에 경고를 내는 경우가 있습니다.
- Next.js는 빌드 시점에 정적 코드 분석을 통해 동적 페이지로 판단될 수 있는 코드를 찾아냅니다.
(with-searchbar)/page.tsx가 Static Page로 선정된 경우:- 특정 페이지가 정적 페이지로 선정되면, 내부의 모든 컴포넌트도 정적이라는 가정이 수반됩니다. 그러나
useSearchParams()가 포함된 컴포넌트는 클라이언트 측에서 실행되어야 하는 로직이기 때문에 사전 렌더링 시점에 이 부분이 문제를 일으킬 수 있습니다. 그로 인해 빌드 중 오류로 체크될 수 있습니다.
- 특정 페이지가 정적 페이지로 선정되면, 내부의 모든 컴포넌트도 정적이라는 가정이 수반됩니다. 그러나
useSearchParams()의 Dynamic Page 조건 포함 여부:useSearchParams()는 URL의 쿼리 스트링을 포함해 동작하므로, 클라이언트 측에서 실행되어야 합니다. 이로 인해 동적 페이지로 분류될 수 있는 조건을 만족하게 됩니다. 그러나 이러한 경우에도 빌드 타임에 경고로 체크될 수 있으니,Suspense와 같이 클라이언트 렌더링에 특화된 방법을 사용할 수 있습니다.
해결 방안:
Suspense를 이용하여 해당 부분을 감싼 후 클라이언트에서 처리되도록 하거나,loading.tsx파일을 생성하여 이를 최종적으로 해결할 수 있습니다. 이는 빌드 오류 없이 클라이언트에서 마무리되게 만드는 방법입니다.
유사한 주제에 대해 다른 학습자가 남긴 유익한 질문과 답변을 참고할 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
Next.js 사전렌더링 이해하기 부분
0
22
2
모달 관련 질문
0
30
3
렌더링 관련 질문
0
76
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
59
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
60
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
73
2
npx prisma db push 시 에러가 뜹니다.
0
91
3
vercel 배포를 실패하였습니다.
0
94
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
54
2
getServerSideProps 함수와 SSR의 관계
0
76
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
58
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
112
2
일반적인 nextjs project architecture에 대하여..
0
83
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
71
2
배포 시 오류 발생
0
83
2
백엔드 서버 오류납니다.
0
79
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
89
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
103
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
60
2
빨간줄 설정
0
74
2
익스텐션 질문
0
58
1
강의 들으면서 궁금한 부분 질문드립니다.
0
108
1
서버 배포 에러입니다.
1
97
2
[5.2) 풀라우트 캐시 2] fetch의 cache 옵션 기본값 질문: no-store/force-cache
1
102
2