트러블슈팅: 재사용 레이아웃을 page로 구현했을때 문제점, 해결

기존에 Next.js로 개발되어있던 화면인데, 
재사용하는 레이아웃이 컴포넌트가 아니라 page로 구현되어 있는 상황..(url을 공유할만한 페이지도 아님!)
page에서 csr로 데이터 패칭을 받아서 화면에 뿌려주는데, 리액트 쿼리를 이용한다.

새로고침을 하지 않았을때는 리액트 쿼리에서 유지하고 있던 캐시를 사용할 수 있기 때문에 초기값이 제대로 반영된다.
문제는 새로고침을 했을때 데이터가 모두 날아가고 page가 렌더링된 이후에 csr로 네트워크 요청을 하기 때문에

 

이렇게 찍힌다.

useState의 초기값에 데이터를 넣어줘야 하는데, undefined가 먼저 찍혀서 초기값으로 넣을 수 없다.

useEffect도 사용할 수 없는 상황(재사용컴포넌트의 onChange이벤트와 연동되어 무한루프)

 

이런 상황에서 옵션이 3가지 떠올랐다. 

1. 문제가 되는 재사용컴포넌트를 수정한다.

2. 데이터페칭을 ssr로 프리렌더링 해서 초기값을 박아놓자

3. page를 component로 바꾸고 props를 보내자

 

1번은 근본적인 해결책도 아닐뿐더러 다른 컴포넌트에서는 멀쩡히 사용하고 있기 때문에

하지 않기로 했다. 빈대잡으려다 초가삼간 태우는 느낌..?

2번도 역시 근본적인 해결책은 아니다. 그리고 전혀 검색엔진에 노출할 필요가 없는 데이터이기 때문에 ssr을 할 필요가 없다.

3번이 맞는 방법인 것 같다.

재사용가능한 component로 바꾸고 Props로 데이터를 담아 보내면 문제가 해결될 것이다.

근데 이 경우 재사용되는 컴포넌트의 상황에 맞는 라우팅을 비롯해

여러 수정사항이 필요했다. 바쁜 상황이라 빠른 배포가 필요해서

2번(SSR로 넥스트 서버에서 데이터 프리렌더링 하기) 방법을 사용해서 기능을 구현해놓고 리팩터링을 하기로 했다.

 

getServerSideProps는 브라우저가 아니라 Next서버에서 실행되기 때문에 쿠키를 들고 가지 못했다.

콘솔에 context를 찍어보면 별게 다있다.

req에서 cookies도 찾을 수 있다.

보내고자 하는 쿠키를 찾아서 변수에 저장하고 axios요청에 직접 헤더를 만들어서 첨부한다.

이렇게 하면 데이터를 매 렌더링마다 미리 가지고 있기 때문에 초기값이 제대로 들어가서 새로고침에도 문제가 발생하지 않는다.

단, 이게 해결책은 아니므로 리팩터링이 필요하다! 이건 배포 끝나고 ㅠㅠ