Next.js

개괄

https://kyounghwan01.github.io/blog/React/next/basic/#next-js%E1%84%80%E1%85%A1-%E1%84%8C%E1%85%A6%E1%84%80%E1%85%A9%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8C%E1%85%AE%E1%84%8B%E1%85%AD-%E1%84%80%E1%85%B5%E1%84%82%E1%85%B3%E1%86%BC

next.js 기본 개념 알아보기

 

보통 next.js 쓰는 이유

nextjs는 React로 만드는 서버사이드 렌더링 프레인 워크입니다. 서버사이드 렌더링을 함으로 얻는 이득은 다음과 같습니다.

1. 클라이언트 렌더링의 경우 모든 js 파일을 로드하고 사용자는 웹을 보게됩니다. 이때까지 사용자는 많은 시간을 대기해야 합니다.
2. seo 문제 - 클라이언트 사이드의 경우 자바스크립트가 로드 되지 않은 경우 아무런 정보를 보이지 않습니다. 구글의 검색엔진의 경우 자바스크립트가 로드되지 않은 페이지를 검색엔진으로 스캔함으로 결론적으로 검색에 아무 페이지도 걸리지 않게 됩니다.

 

 

(1) Next.js에서 코드 스플리팅 하기

(코드 스플리팅은 내가 원하는 페이지에서 원하는 자바스크립트와 라이브러리를 렌더링 하는 것입니다. 모든 번들(chunk.js)이 하나로 묶이지 않고, 각각 나뉘어 좀 더 효율적으로 자바스크립트 로딩 시간을 개선할 수 있습니다.)

 

Next JS는 파일 시스템의 라우트를 내장하고 있기 때문에 pages에 파일만 만들어주면 알아서 해당 라우트가 생성이 됩니다. Next JS는 SSR이나 SSG를 지원하도록 만들어졌기 때문에 React를 사용할때와는 달리 라우트 별로 코드 분할을 하지 않아도 알아서 적용이 되는 구조입니다. 

 

그럼 Next JS에서는 코드 분할을 안해도 되는 건가요라고 물으신다면 당연히 그건 아닙니다. 물론 페이지 단위로는 하지 않아도 되지만 코드 분할을 적용할 수 있는 범위는 생각보다 많습니다. 예를 들어 로그인/회원가입 모달 창 컴포넌트 코드를 분할하여 동적으로 불러온다던지, 페이지 내에 탭 메뉴에 첫 메뉴만 불러오고 사용자가 다른 메뉴를 클릭했을 때 그에 맞는 컴포넌트를 랜더링 하는 방식이 있습니다.

 

Next JS에서 컴포넌트를 동적으로 불러오기 위해선 React.lazy의 extension인 next/dynamic을 사용해주면 됩니다.

동적 불러오기(Dynamic Import)를 통해 코드분할(Code Splitting)

https://mingeesuh.tistory.com/entry/Next-JS-%EC%BD%94%EB%93%9C-%EC%8A%A4%ED%94%8C%EB%A6%AC%ED%8C%85-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0-Dynamic-Import

 

Next JS 코드 스플리팅 적용해보기 (Dynamic Import)

 

관련 공식 도큐먼트:

https://nextjs.org/docs/advanced-features/dynamic-import

Advanced Features: Dynamic Import | Next.js