내 개인 홈페이지는 next14버전에 styled-component를 사용한 스타일링을 하고 있다.
nextjs 14v에서 컴포넌트에서 fetch하는 기능을 공부할 겸 내 게임 캐릭터를 보여주는 페이지를 만들고 있었다.
그런데... 분명 서버에서 해당 데이터를 fetch해서 완성된 html로 내려준다면, 클라이언트 측에서 해당 fetch가 network에 보여서는 안되는데 자꾸 보이는 것이다.
그래서 뭐가 문제인가 gpt와 토론하고 구글링도 해본 결과, ssr이 아닌 csr인 경우라는 것이 잠정적인 원인으로 부각되었다.
nextjs에서 'use client'를 사용한 컴포넌트는 클라이언트 사이드로 동작고, nextjs에서 styled-component를 사용하려면 컴포넌트 상단에 'use client'를 선언해야했다. 그리고 'use client'로 선언한 컴포넌트의 자식 컴포넌트는 모두 클라이언트 사이드로 랜더링된다. 결국 이 원인들이 맞물려서 fetch하는 함수를 가진 컴포넌트도 클라이언트 사이드에서 동작하고 fetch가 network탭에서 포착 된 것이었다.
컴포넌트들을 fetch하는부분과 fetch한 데이터를 받아서 실제 스타일링 하는 컴포넌트로 분리하려 잘 정리했더니 이젠 클라이언트에서 fetch가 일어나지 않았다.
nextjs에서 styled-component를 사용할 때 조심해야하는 이유와 tailwindCSS같은 라이브러리가 뜨는 이유를 몸소 채감한 경험이었다.