[Next.js] What is Next.js?

React.js는 프론트엔드 기술의 대표적인 자바스크립트 라이브러리다. 전형적인 SPA(Single Page Application) 방식이며 CSR(Client Side Rendering)으로 동작한다.

 

React.js가 나오고 나서부터 국내의 최신 프로젝트들은 React.js를 기반으로 하는 프로젝트들이 너무나도 많고 실제 React.js를 쓰고 있는 기업들도 굉장히 많다.

 

과거에 HTML, CSS, Javascript(jQuery)를 사용하던 옛날시대에서 이제는 React.js라는 최고의 자바스크립트 라이브러리로 성능은 물론 UI/UX에서도 많은 변화를 일으킬 정도로 정말 대단한 라이브러리다.

 

하지만, 이 마저도 만족스럽지 못했던 것이 바로 SPA 단점에서 부터 시작되었다.

 

SPA 방식은 첫 사이트에 접속 할 때 하나의 페이지를 불러오고 그 페이지에 있는 모든 자바스크립트 파일을 한번에 불러온다.

 

이 방식으로 정말 많은 사용자 경험이 좋아졌지만, 모든 자바스크립트를 불러오는 과정에서 피할 수 없는 첫 로딩 속도가 굉장히 느리다는 점이다. 또한 SPA는 검색 엔진 최적화(SEO)에도 좋지는 않다.

 

이 SPA의 단점으로 나온 것이 서버 사이드 렌더링(SSR) 방식의 Next.js다.

 

The React Framework for Production Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
(Next.js는 React.js 프레임워크로 정적 및 서버 렌더링, Typescript 지원, 스마트 번들링, 라우트 프리페칭이 장점인 프레임워크라고 공식 홈페이지에 소개되어 있다.)

서버 사이드 렌더링(SSR)은 사이트에 접속할 때 렌더링된 html을 불러오게 된다. 먼저 html을 불러온다는 것은 이미 렌더링 된 하면이 사용자에게 먼저 보여지기 때문에 체감상 속도가 더 빨라보이는 효과를 준다.(물론 자바스크립트 파일을 불러올 때 까지는 반응하지 않는다.)

 

하지만 장점도 있듯이 단점도 있는데, 새로운 페이지로 이동을 할 때 화면이 깜빡이는 것이 보이며 템플릿을 중복해서 로딩하며 그로 인해 서버에 많은 부하를 주기 때문에 좋지 않다.

 

그래서 SPA의 장점과 SSR의 장점을 모두 합친 것이 바로 Next.js다.

 

그럼 Next.js를 사용하는 이유들을 하나 둘 씩 알아보자.

 

1. 정적 및 서버 렌더링.

Next.js는 기본적으로 빌드 시에 만든 모든 페이지를 미리 렌더링을 하여 사용자에게 빠르게 보여준다. (전형적인 SSR 방식)

그 후 페이지에 필요한 최소한의 자바스크립트 코드를 불러와 페이지를 사용할 수 있게 해준다.

그리고 정적 파일을 제공해 편리한게 페이지에서 정적으로 사용하고 있는 이미지의 대한 path도 따로 설정해 줄 것도 없이 이미지 파일 이름만으로도 바로 설정이 가능해 정말 편리하다.

 

2. Typescript 지원

Next.js는 기본적으로 Typescript를 지원하고 있어 따로 모듈을 설치하지 않고도 바로 Typescript를 사용할 수 있다.

 

3. 스마트 번들링

기본적으로 웹팩이나 바벨을 사용하고 있어 따로 설정을 해주지 않고도 바로 사용할 수 있다.

 

4. 라우트 프리페칭

React.js에서는 Routing을 하기 위해서는 항상 'react-router'라는 모듈을 사용하였다. 항상 route라는 자바스크립트 안에 라우팅할 페이지들의 경로를 설정해주고 기타 props들을 설정해 주는 과정을 하면서 route path를 항상 찾거나 맞지 않다면 번거롭게 수정을 해야되는 문제가 종종 있었지만, Next.js는 파일 시스템 기반 라우팅을 사용하므로 폴더 경로에 따라 만들어준 페이지의 경로가 설정되어 따로 path를 잡아줄 필요도 없다.

 

가장 큰 장점으로 4가지를 봤지만 사실 더 깊게 파고들수록 Next.js의 장점은 더욱더 많은 것 같다. 아직 공부 초기단계지만 이론적으로 가장 큰 장점만 간추려봤지만 앞으로 Next.js의 원고를 쓰면서 더욱 더 많은 Next.js의 장점들을 소개하는 시간이 될 것 같다.

 

같은 프레임워크로 Vue.js 기반 Nuxt.js도 있는데 Next.js를 공부하고 시간이 되면 Nuxt.js도 공부해보고 싶다.