[Next.js] query 사용, 반복적인 랜더링 발생

프로젝트를 진행하는 와중에 무한 랜더링 오류가 발생했다.

 

상황

로비 페이지에서 null로 유저가 계속 갱신되고 새로운 값을 받을 수 없다.

즉 state가 null로 계속 입력되고 있다는 뜻.

하지만 데이터가 캐싱되고 있어 리뷰 페이지에서는 유저아이디를 추출할 수 있다.

 

오류 의심목록은 다음과 같았다.

1. 페이지 구조

- 하나의 폴더에 하나의 페이지가 아니라 폴더-페이지+폴더-페이지 형태로 만들어서 경로가 꼬였는지 확인

- 사실 이 구조는 널리 사용되는 구조라서 혹시나 하는 마음에 확인해봤다.

2. UUID로 랜덤하게 생성되는 ID들의 typescript 오류

- supabase는 uuid를 text 타입으로 만든다.

- uuid가 입력되지 않았다는 오류가 뜨기 때문에 제시된 의문이었다.

 - 하지만 uuid는 이 시점에서는 사용되지 않는다. 사용되는 것은 user_id로 이 항목은 모두 string으로 통일됐기 때문이다.

3. store에 저장된 시점

- store에 새로고침 되면서 user 정보가 null로 들어가는 것 때문이 아닐까?

- 하지만 user=null로 계속해서 리랜더링이 발생하는 원인으로 보기에는 근거가 빈약했다.

- 만약 store 시점에 문제가 있어도 잘못된 요청 한번에 대한 오류가 발생했을 것이다.

4. string과 null 둘다 가능한 조건으로 관련있는 fetch 수정

- null 값과 string 값을 모두 갖는 fetch를 전면적으로 수정했다.

- 원인이 아니었다.

5. 쿼리구조 입력을 잘못 했을 가능성

- 잘 불러와지는 컴포넌트와 같은 코드로 작성하였다. 복사/붙여넣기

- 같은 코드를 입력했음에도 한쪽만 불러와지지 않았으므로 구조의 문제라면 두 컴포넌트가 같은 문제가 있었을 것이다.

 

결론

원인은 suspense의 위치였다.

쿼리를 사용하기 위해 suspense를 사용했는데, 사용하는 부분의 컴포넌트의 return 부분에 감싸서 사용했다.

하지만 이렇게 사용하면 적용되지 않는다.

데이터 패칭을 하는 것보다 한단계 위의 컴포넌트-이 프로젝트에서는 page.tsx-에 suspense를 지정해야 한다.