[NextJS] Code splitting and prefetch

_이 글은 Next.js의 공식문서 Code splitting and prefetching을 보고 정리한 글입니다

Next.js는 Code splitting, prefetching 기능을 제공합니다

Code splitting

Code splitting 가 없는 홈페이지에 접속하게 되면 아직 내가 들어가지도 않는 페이지들의 정보까지 한꺼번에 load됩니다
그러면 많은 양의 페이지가 있는 경우 속도측면에서 안 좋은 퍼포먼스를 보이겠죠

그래서 필요할 때만 load할 수 있는 Code splitting은 다음과 같은 장점이 있습니다.

• page의 코드들이 한꺼번에 load되는 것이 아니라 해당 page에 접속할 때 load됩니다
• 수백개의 page가 있어도 빠르게 load할 수 있습니다
• 하나의 page에 에러가 발생해도 애플리케이션은 여전히 작동합니다. 이것을 isolated라고 합니다

prefetch

prefetch는 다음 page들의 코드들을 미리 가져옴으로서 빠르게 load하는 것을 말합니다

Link컴포넌트가 브라우저의 viewport에 나타나게 되면,

Next.js는 Link컴포넌트에 연결된 page들의 코드들을 미리 가
져와 준비를 합니다.

그러면 해당 Link컴포넌트를 클릭할 때 아주 빠르게 페이지 전환을 할 수 있습니다