Next.js 란?

이번 포스트에서는 Next.js에 대해 간단히 알아본다.

 

Next.js는 React.js의 서버사이드 렌더링을 쉽게 구현할 수 있게 도와주는 프레임워크다.

기존의 React.js는 SPA(Single Page Application)으로, url이 달라져도 새로운 html을 다시 만들지 않아 화면의 리로딩이 줄어든다. 또한, CSR(Client Side Rendering) 방식으로 작동하여, 서버에서는 비어있는 html을 응답하고 클라이언트 쪽에서 화면을 채운다.

이 때, 발생하는 문제점이, 앱의 규모가 커지면 클라이언트 쪽에서 html을 채워주는 내용이 많아져, 첫 로딩이 굉장히 느려진다.

또한, html을 기반으로 요소를 찾는 검색엔진에서 비어있는 html 파일로 인해 SEO(Search Engine Optimization)에 불리하다.

 

이러한 단점을 보완하기 위해 SSR(Server Side Rendering) 개념을 가지고 나온 것이 Next.js 이다.

사용자가 처음 접속할 때는 서버에서 받아 렌더링을 하고(빈 html이 아님), 그 뒤의 라우팅 처리를 CSR 방식을 이용하는 것이다.

---

Next.js의 기본 개념과 React.js의 차이점에 대해 알아보았다.

서버사이드 렌더링에서도 getServerSideProps와 getStaticProps들이 있는데, 차후 Next.js의 기본 사용법을 알아보도록 한다.