[FE] Next.js App Router에서 dynamic import를 제대로 이해하기
·
IT/Front-End
들어가며dynamic import를 설명할 때 흔히 나오는 문장은 대체로 비슷합니다. 번들을 쪼개고, 처음에 내려보내는 JavaScript를 줄이고, 필요할 때만 코드를 받는다는 설명입니다. 틀린 말은 아닙니다. 다만 App Router에서는 이 설명만으로는 부족합니다. App Router에서 dynamic import는 단순히 "코드를 나중에 받는 기능"이라기보다, 클라이언트 컴포넌트 경계를 어떤 단위로 늦게 활성화할지 정하는 도구에 가깝습니다. 그래서 이 기능을 이해할 때는 번들 크기만 볼 것이 아니라, 초기 HTML에 무엇이 보이는지, RSC payload에 무엇이 남는지, hydration이 어디서부터 시작되는지를 함께 봐야 합니다. 이 글은 그 관점에서 import(), next/dynamic,..