nextjs

들어가며 기능만 쌓다가 어느 순간 FCP가 너무 느려진 걸 체감하게 됐습니다.연말에 묵힌 때를 지울 겸 메인 번들 최적화 작업을 진행했고 그 과정을 공유합니다.1. SideEffects 필드미사용 모듈(dead code, 죽은 나뭇잎)을 제거하는 것을 죽은 나뭇잎을 제거하는 것에 비유하여 tree shaking이라고 합니다. 트리쉐이킹을 위해선 미사용 코드를 제거했을 때 문제가 없음을 모듈 번들러에 알려야 하는데 그 필드가 바로 sideEffects 필드입니다. 이 맥락에서 말하는 대표적 side-effects로는 아래와 같은 상황들이 있습니다.CSS 가져오기전역 객체를 수정하는 폴리필글로벌 이벤트 리스너를 등록하는 라이브러리프로토타입 체인을 수정하는 코드💡 사이드 이팩트는 하나 이상의 export를..

서론next13은 React Server Component(이하, RSC)을 중심으로 app router라는 큰 변화를 가지고 왔습니다.RSC과 server-action의 등장으로 인해 이젠 서버사이드 데이터 패칭의 범위가 확 늘어났습니다. 더불어 이런 서버사이드 요청에 대한 캐싱을 지원하기에 그럼 이제 react-query는 next-js에서 필요없을까? 하는 생각을 하게 됩니다.결론 부터 말하지만 역할은 축소됐지만 여전히 필요하다라고 말씀드리고 싶습니다. react-query는 클라이언트의 요청 서버 사이드의 요청은 next.js에서 처리할테니까요이 부분에 대해서 next.js의 data-fetching 파트에서도 다음과 같이 설명하고 있습니다swr 혹은 react-query를 이용해 클라이언트에서 ..