dynamic-import1 [NextJS] Viewport에 들어온 컴포넌트만 불러오기 NextJS에는 코드스플리팅을 위한 Dynamic import라는 기능이 있습니다. 어떤 컴포넌트를 특정 조건에서만 렌더링할때(모달 혹은 hover/ click시 노출되는 컴포넌트가 대표적) 그 컴포넌트를 위한JS를 해당 조건이 true일때 import해오는 기능입니다. 이 기능을 활용하지 않고, NextJS로 페이지를 구성하면 lighthouse의 퍼포먼스에서 처참한 점수를 보실 수도 있습니다. 아무튼 이 기능은 사용하기 어렵지 않지만, 섹션 하나하나가 모여 거대한 한페이지를 이루는 랜딩/이벤트 등의 페이지에서 단순하게 사용하면 퍼포먼스적인 이득을 보기가 힘듭니다. 그 이유는 viewport에 보이지 않는 컴포넌트도 전부 렌더링하기 때문인데, 이를 처리하기 위해서는 해당 컴포넌트가 viewport에 보.. 2022. 4. 17. 이전 1 다음
