Next.Js란?
React의 Server Side Rendering을 쉽게 구현 할 수 있게 도와주는 간단한 프레임워크이다.
React만으로 자체적으로 SSR을 구현 할 수 있지만, 생각보다 복잡하기에 Next가 등장했다.
과거 웹 사이트들은 대부분 SSR로 동작되어 왔기에 페이지가 여러개로 구성된 방식을 사용했다.
스마트폰이 보급되면서 예전 웹들은 모바일에 최적화되지 않았기에 사용자는 불편함을 느끼게 되었고, 사용자는 모바일 앱과 같은 형태의 웹 페이지가 필요하게 되었다.
이러한 문제를 해결하기 위해 React, Vue, Angular 등 여러 라이브러리, 프레임워크가 생기게 되었고, Client Side Rendering, Single Page Application가 등장하게 되었다.
마치 모바일 앱과 비슷한 형태로 이루어져 있어, Header 영역은 고정되어 있고 Main 영역의 상태만 계속 변경하는 방식을 사용한다.
일반적인 React 렌더링 방식 : render() > ComponentDidMount() > render()
Next의 렌더링 방식 : getInitialProps() > render() (데이터를 먼저 가져와서 한번에 렌더링을 한다)
Next는 Page 이동시 기존 React 방식인 CSR보다 느린데, page를 요청 할 때 마다 중복되는 파일을 내려받아야 하기 때문
CSR은 초기 속도는 느리지만 첫 페이지 로딩때 모든 파일을 내려받기때문에 페이지를 이동 할 때 마다 해당 페이지에서 필요한 데이터만 불러서 사용하면 된다.
Next의 핵심기능
Code Spliting
일반적인 리액트 싱글페이지에서는 초기 렌더링때 모든 컴포넌트를 내려받는다. 하지만 규모가 커지고 용량이 커지면 로딩 속도가 지연될 수 있다는 문제점이 있다. Next는 이러한 문제점이 개선되어, 필요에 따라 파일을 불러 올 수 있게 여러개의 파일을 분리하는 코드 스플리팅을 사용했다.
Pages 폴더 안에 각각의 라우트들이 들어가며 Components 폴더에는 React 컴포넌트들이 들어가게 되는데, 예를 들자면 브라우저가 실행되고 사용자가 접속을 하게 되면 첫 페이지인 ,index페이지만 불러오고, 그 이후 페이지가 넘어 갈 때 마다 해당하는 페이지를 불러오게 된다.
getInitialProps()
이 함수를 통해 데이터를 가져 올 수 있는데 , React의 Component는 렌더링이 두번 되는 반면 Next에서 getInitialProps()는 데이터를 미리 갖고오기 때문에 한번에 렌더링이 가능하다.
