Next.js

Next.js 써보셨어요?

Next.js는 React의 SSR구현을 도와주는 프레임워크입니다.
React도 SSR을 고려하여 설계해서 자체적 구현이 가능하지만
개발환경을 만들기는 복잡합니다.
이러한 문제해결을 위해 Next가 나왔고 사용법도 간편합니다.

일반적인 React렌더링 방식은 render()함수가 먼저 실행되고 그 다음 ComponentDidMount()함수를 통해 데이터를 가져와 다시 한번 렌더링 된다.

반면 Next는 getInitialProps()라는 함수를 사용하기 때문에 데이터를 먼저 가져와서 한 번에 렌더링을 해준다.(SSR)

Next.js 핵심기능

코드 스플리팅

일반적으로 리액트 싱글페이지에서는 초기 렌더링 때 모든 컴포넌트를 내려받는다 하지만 규모가 크다면?
로딩시간이 지연되는 문제가 발생한다. Next는 이러한 문제점을 개선해서 필요에따라 파일을 분리해서 불러오게하는 코드 스플리팅을 사용하였다. 디렉토리구조를 보면 pages 폴더 안에 page 라우터들이 들어가 있고 components폴더에는 react 컴포넌트들이 들어간다.

간단한 클라이언트 사이드 라우팅 제공

정말 편하단다

출처

이번기회에 Next.js를 처음으로 사용하게 될 것 같은데 확실하게 Next.js의 장점을 느끼고 싶다