Next.js란 ?
next.js는 리액트를 서버사이드 렌더링 방식(SSR)으로 쉽게 구현할수록 환경을 제공해주는 프레임워크입니다.
모바일 시대가 도래하면서 모바일 환경에 맞춰진 웹 페이지, 즉 웹에 대한 니즈가 증가했고 그에 따른 성능 이슈도 함께 늘어났습니다.
이로 인해 스마트폰을 통해 웹을 출력하기 위해서는 기존과는 다른 접근이 필요했고, 그에 따라 Single Page Web Application 기법(SPA)이 등장하게 되었습니다.
SPA란(CSR) ?
SPA는 브라우저에 로드되고 난 후에 페이지 전체를 서버에 요청하는 것이 아니라, 최초 한번 페이지 전체를 로딩한 이후에 데이터만 변경하여 사용하는 웹 어플리케이션을 의미합니다.
전통적인 웹 방식(서버 사이드 렌더링)은 SPA 방식에 비해 성능 문제를 보였습니다. 요청시마다 새로고침이 일어나며 페이지를 로딩할때마다 서버로부터 리소스를 전달받아 화면에 렌더링하는 방식이였기 때문이죠.
Next 사용이유
가장 큰 이유는 리액트 프로젝트에서 SSR(Server Side Rendering)을 하기 위함이라고 볼수 있습니다.
SPA은 검색엔진에서 검색 효율이 좋지 못합니다. 이로인해 네이버, 다음 등의 검색 봇들이 사이트를 검색하여 노출시킬 수 있도록 React 화면을 렌더링 할 때 렌더링을 해줘야 합니다. 이를 SSR이라고 부릅니다.
코드스플리팅
Next.js 프레임워크는 기본적으로 코드스플리팅 기능을 제공하고 있습니다.
Next 라우팅 시스템
next는 React.router와 같은 자체적인 Router기능을 가지고있습니다. 사용법으로는 조금의 정형화된 폴더체계를 가지고 있는데 폴더의 이름은 소문자로 pages로 꼭 만들어줘야합니다.
이는 제가 웹 팀 프로젝트를 진행하면서 next.js를 적용한 page폴더 정리해둔 것입니다
