왜 next.js인가?

번개마켓 프로젝트에서는 next.js를 사용했다. 그렇다면 왜 next.js인가?
저번 팀 프로젝트에서는 프론트엔드에서 많이 쓰이는 기술이 React이기 때문에 해당 라이브러리를 이용한 프로젝트를 하고 싶었고, 해당 기술의 숙련도를 익히고 심화적으로 증진시키기 위함이 주 목적이었다.
사람들이 많이 이용하기 때문에, 혹은 취업하고 싶은 기업이 해당 경험을 우대해주기 때문과 같은 이유로 기술이나 툴을 선택한 것이 가장 주된 이유지만, 이번에는 기획, 설계, 구현까지 혼자 진행하는 프로젝트이기때문에 사용하는 렌더링 방식에 대해 명확히 알고 넘어가야겠다고 생각했다.
 
우선 Next.js를 사용하는 가장 큰 이유는, SEO(Search Engine Optimization)를 위한 Server-Side Rendering (SSR)을 가능하게 하기 때문이다.
기본적으로 React는 Client Side Rendering(CSR)을 한다. 이는  웹사이트를 요청했을 때 빈 html을 가져와 script를 로딩하기 때문에, 첫 로딩 시간도 오래걸리고 Search Engine Optimization(SEO)에 취약하다는 단점이 있다.
반면, next.js는 pre-reloading을 통해 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주고, 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO에서도 장점을 얻을 수 있다. pre-reloading은 SSR 뿐만 아니라 정적 사이트 생성(Static-Site Generate (SSG))도 가능하게 해준다. 또, SSR과 CSR도 혼합하여 사용 가능하다.
next.js 없이 react-helmet등의 라이브러리로 SEO에 대응할 수 있다.

 

직관적인 페이지 기반 라우팅 시스템

next.js는 pre-rendering 뿐만 아니라 페이지 기반 라우팅 시스템도 제공한다. 프로젝트의 가장 바깥 폴더인 /pages 폴더에서 컴포넌트를 export하면 폴더명이 페이지 route가 된다. react.js에서는 route명을 별도로 지정해야했었는데, 한결 간편하게 라우팅을 할 수 있었다.
 

페이지간 빠르고 매끄러운 전환을 위한 client-side navigation

next는 < Link /> 컴포넌트를 통해 페이지간의 빠르고 매끄러운 이동을 가능하게 한다. HTML의 a 태그와 달리 페이지를 리로딩하지 않고도 페이지간 이동이 가능하고,  link 컴포넌트가 뷰포트에 보였을 때 관련 페이지를 백그라운드에서 미리 가져다 놓기 때문에, 사용자가 링크를 클릭했을 때 매우 빠르게 해당 페이지로 이동할 수 있게 해준다.
이는 카카오맵을 구현할때 활용했다.

 

Code Splitting (코드 분할)

코드 분할은 웹의 첫 페이지가 로딩될 때, 거대한 javascript payload를 보내는 것이 아니라, 번들을 여러 조각으로 조각내서 처음에 가장 필요한 부분만 전송해주는 방식을 통해 어플리케이션 로드 타임을 줄여준다. 코드 분할은 webpack 등의 모듈 번들러도 지원하고 있는 기능이지만 next.js를 사용하면 별도의 설정없이 자동으로 프로젝트에 적용된다.
어떻게 동작할까? dynamic import를 사용하여 모듈이 호출될 때만 모듈을 import한다. 즉 사용될 때만 모듈을 불러온다.
이는 reactQuil을 구현할때 활용했다.
 
 
참고
https://velog.io/@syoung125/Next.js-기본-개념-1-Next.js-란-Next.js를-왜-사용할까-Next.js의-장점은