[Next.JS] NextJS란

Next는 React 전용 프레임워크입니다.

React에서 Sever Side Rendering을 쉽게 하기 위해 만들어진 프레임워크입니다.

CSR(Clinet Side Rendering) 과 SSR(Server Side Rendering)은 이전의 블로그를 참고해주시면 되겠습니다.

 

 

 

! Next의 특징

● React에서 SSR을 가능하게 해준다.

SPA의 큰 단점 중 하나는 첫 페이지에 빈화면을 먼저 받고 JS파일을 해석하며 화면을 구성하기 때문에 SEO에 가장 큰 문제를 갖고 있습니다. React만으로도 SSR을 구현할 수 는 있지만 매우 복잡하고 까다롭다고 합니다. 이를 Next를 통해 해결할 수 있습니다.

완성된 HTML파일을 처음에 받아오게 하여 맨 처음 화면의 로딩 속도 또한 빠르게 해줍니다.

 

● Code Spliting

처음 로딩에 모든 파일을 내려받게 되는 SPA는 규모가 커질수록 속도와 성능에서 무리가 갈 수 있습니다.

Next는 필요에 따라 파일이 불러올 수 있게 만들어주는 코드 스플리팅을 제공합니다.

page폴더에 routing될 페이지들을 넣어 두고, component 폴더에 등등 나누어서 page의 index.js를 가장 먼저 불러옵니다. page폴더명은 고정이어야 하며 그래야 인식을 하고 처리를 받습니다.

기본적으로 page폴더의 index.js 는 '/'의 주소로 메인주소이며, 예로 page폴더의 하위 폴더 login의 loginForm.js 파일은

url 이 '/login/loginForm이 됩니다.

또한 _app.js와 _document.js 파일들을 통하여 모든 페이지에 적용될 Layout이나 파일들을 설정할 수 있다.

네비게이션 바나 맨위의 상태바같이 모든 화면에 공통으로 들어가야할 요소가 있다면 _app.js에 작성하면 되고 

공통적으로 import해야하는 모듈이 있다면 _app.js에서 import하게 되면 모든 컴포넌트에 import해야 하는 수고를 덜을 수 있게 됩니다.

 

● 간편한 CSR기능(라우팅/링크)

import Link from 'next/link';
...
<Link href="/page2"> 페이지2 </Link>
<Link href=`/${this.state.where}`>이동</Link>

React Router와는 다르게 HTML의 a태그처럼 href를 통해 주소를 입력합니다. 

또한 Redirect로 개발자와 사용자에게 조금 더 편리한 라우팅을 가능하게 해줍니다.

 

● getInitialProps()  ==> getStaticProps(), getServerSideProps + getStaticPaths

서버 사이드에서 실행하여 데이터 패치를 할 수 있는 함수입니다.

CSR의 Data Fetch는 마운트 후에 Didmount에서 데이터를 가져오거나 하는 경우가 대부분인데 

getInitialProps는 이 과정을 서버에서 미리 처리하여 데이터를 미리 제공한 상태로 HTML을 구성할 수 있게 해줍니다.

Next 9.3 버전 이상부터 뒤의 함수들로 대신 사용하도록 권장되는데, 각각 용법에 맞는 함수를 사용하여

더욱더 효율적으로 코드를 작성할 수 있도록 해주는 개발자 친화적인 프레임워크라고 합니다.

이 함수들은 다음 블로그에서 더욱 더 자세히 다뤄보도록 하겠습니다.

 

 

 

다음 블로그에서는 Next 10버전에 새롭게 추가된 기능들 과 서버사이드에서 실행되는 함수에 대해서 자세히 알아보도록 하겠습니다. 읽어주셔서 감사합니다.

틀린정보나 추가할 점도 알려주시면 매우 매우 감사하겠습니다.!!!