Next.js, React의 Next Level

https://theworldaswillandidea.tistory.com/66

SSR과 CSR의 기본적인 이해도가 필요합니다.

 

 

Next.js는 React의 프레임워크다.

 

다들 알다시피 React는 라이브러리기 때문에 프로젝트 초반에 설정해줘야할 것들이 꽤 있다.

 

하지만, Next.js를 사용한다면 React의 설정들을 그저 Next.js에게 의존하고 다음 단계로 넘어가면 된다.

 

물론 이런 편리함때문만이 Next.js를 사용하는 이유는 아니다.

 

자, 그럼 본격적으로 Plain React를 넘어 React의 다음 단계를 알아보자.

 

 

 

Next.js는 기본적으로 React를 사용하면서 서버사이드 렌더링을 쉽게하기 위해 사용한다.

 

Plain React만으로 서버사이드 렌더링을 구현할 수 있는 방법이 존재하긴 하지만, 만약 당신의 React프로젝트가 초기 단계라면 이러한 프레임워크를 쓰는게 개발과정에 도움이 많이 될 것이다.

 

 

Next.js의 기본적인 초기페이지 동작과정은 이렇다.

 

 

사용자가 최초 접속하여 클라이언트에게 요청한다면 클라이언트는 다시 서버로 요청한 후 Pre-Rendering - Init Load(정적 HTML Load) - Hydration(JS를 채워넣음) 순으로 동작한다.

이후 페이지 이동이나 동작이 발생하는 경우 CSR 방식을 통해서 서버를 거치지 않는다.

 

 

 

 

Pre-rendering

Next.js는 React.js를 서버측에서 pre-rendering하여 html을 생성하고, 브라우저에게 보내준다.

그 후, 브라우저에서 React를 사용해 웹페이지를 완성한다.

 

getServerSideProps() 메서드를 활용해 SSR 방식으로 매 요청시마다, 내부의 데이터 패치 로직을 발생시킨다.

 

이외에도 getStaticProps(), getStaticPaths() 같은 메서드를 활용할 수 있다.

 

 

File -System based Routing

프로젝트 내 /pages 폴더에 파일을 추가하여, 해당 파일명으로 라우팅한다.

 

또, /authorization/[id]와 같이 Dynamic route도 지원한다.

 

Client-side transition

<Link/> 컴포넌트를 통해 페이지 리로드없이 페이지간 빠르고 매끄러운 이동을 가능하게 한다. <Link/> 컴포넌트가 뷰포트에 보였을 때 관련 페이지를 백그라운드에서 미리 가져다 놓기 때문에 링크를 클릭했을 때 매우 빠르게 해당 페이지로 이동할 수 있게 해준다. (이는 프로덕션 모드에서만 가능)

 

Code Splitting 

코드 분할은 첫 페이지 로드 시에 모든 JS를 보내는 것이 아니라, 번들을 여러 조각으로 분할하여 처음에 가장 필요한 부분만 전송해 주는 방식을 통해 어플리케이션 로딩 시간을 줄여준다.

 

 

 

이러한 장점 이외에도 Next.js를 사용하여 얻는 자질구레한 장점들이 존재하므로, 만약 당신의 React 프로젝트가 초기단계라면 Next.js를 도입하는 것을 고려해보길 바란다.

 

 

Thanks for watching, Have a nice day.