inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

한 입 크기로 잘라먹는 Next.js

5.2) 풀 라우트 캐시 2

5.2) 빌드 시 searchbar 컴포넌트 에러 관련 질문

해결된 질문

379

allmy

작성한 질문수 10

0

강의에서 처음 build 할 때 searchbar 컴포넌트에서 suspense 에러가 나타나는데, 이 때 suspense를 하고 다시 build를 하면 인덱스 페이지는 dynamic page로 빌드 됩니다.

dynamic page는 빌드 타임에서 생성하지 않는 것으로 전 강의에서 이해했습니다.

그런데 왜 빌드 타임에서 생성하지 않는 인덱스 페이지에서(dynamic) useSearchParams() 를 실행하는데 에러가 나타나는 건지 잘 모르겠습니다.

 

질문 드립니다

react typescript next.js

답변 1

1

이정환 Winterlood

안녕하세요 이정환입니다. 상원님 엄청 예리하시네요 👀 ..!

우선 상원님의 말씀처럼 Dynamic Page는 빌드타임에 생성되지 않습니다. 어딘가에 저장되지도 않죠

그러나 다이나믹 페이지라고 해도 넥스트앱의 잠재적인 오류를 파악하기 위해 넥스트측에서 빌드시에 렌더링을 시도해본다고 합니다. 이때 Suspense로 감싸져 있지 않은 문제를 찾게 되면 일단 오류를 내뿜게 된다고 합니다.

2

allmy

모든 Dynamic page가 빌드시에 서버에서 페이지는 생성하지 않지만 렌더링은 하기 때문에,

동적 함수를 사용하는 Client 컴포넌트를 사용할 때 Suspense 컴포넌트처럼 서버에서 렌더링을 하지 않도록 처리 해야 하는 것으로 이해했습니다.

 

이해되지 않았는데, 해결되었습니다.

답변 감사합니다.

1

이정환 Winterlood

넵 "검사 단계에서 문제가 발생하게 된다" 정도로 이해해주시면 좋을 것 같습니다.

저도 사실 그닥 공감되는 동작방식은 아니긴 하네요 ... 좀 더 찾아보고 자세히 알게되면 다시 답변 드릴게요!

풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문

0

53

2

next.js 프로젝트

0

50

1

Next.js + Tanstack Query BFF 구조 질문

0

47

2

Next.js 사전렌더링 이해하기 부분

0

52

2

모달 관련 질문

0

56

3

렌더링 관련 질문

0

92

2

중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화

0

78

2

라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.

0

76

2

SSR시 context에 params말고 query를 사용하면 안되나요?

0

90

2

npx prisma db push 시 에러가 뜹니다.

0

107

3

vercel 배포를 실패하였습니다.

0

120

3

Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?

0

74

2

getServerSideProps 함수와 SSR의 관계

0

87

6

없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다

0

70

2

실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.

0

124

2

일반적인 nextjs project architecture에 대하여..

0

97

2

2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?

0

82

2

배포 시 오류 발생

0

97

2

백엔드 서버 오류납니다.

0

95

2

취약점 제거시 nestjs 버전 문제가 생길까요?

0

102

1

eslint.config.mjs 내 rules 어떻게 설정 하나요?

0

113

1

[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.

0

69

2

빨간줄 설정

0

88

2

익스텐션 질문

0

65

1