Next.js에서 Hydration을 피하는 법
때때로는 Hydration이 필요하지 않을 수도 있다.
· 약 4분
Next.js에서 Hydration을 피하는 법
BFF, XHR, Service Worker, 그리고 IndexedDB까지 사용해본 이야기
Next.js App Router로 제품을 개 발하며 고민거리였던 것은 페이지 이동이 느려 링크 클릭이 무반응처럼 보일 때가 있다는 것이었어요. 당연히 JS 크기를 줄이는 것이 Best practice겠지만, 이는 상황을 고려했을 때 쉽지 않은 방법이었어요.
그래서 어떻게 사용자에게 "페이지 이동 중"이라는 것을 알려줄지 고민하던 중, useTransition
으로 이를 해결한 방법을 공유합니다.
Static Site Generation(SSG)에서 콘텐츠가 늘어날수록 빌드 시간은 기하급수적으로 증가합니다. 특히 상세 페이지의 개수가 늘어날수록 빌드 시간이 15분까지 늘어나면서 개발 경험에 심각한 악영향을 미쳤습니다.
이러한 비효율적인 개발 워크플로우를 개선하기 위해 고심한 끝에 App Router가 제공하는 SSR + 데이터 캐싱 패턴을 활용하여 빌드 시간을 2분까지 줄인 경험을 이야기하고자 합니다.