NextJS는 왜 쓰는 걸까?

bit.ly/2MaxeLO

 

이 글을 쓰기 전에 NextJS에서 제공하는 Quick Start를 따라 간단한 예제를 구현한 경험이 있었다.

하지만, 그저 쓰면 좋다고만 알았지, NextJS를 왜 써야하고 무엇을 위해 존재하는지를 알지 못했기 때문에 이번 기회를 통해 제대로 NextJS를 사용한다는 것이 무엇을 의미하는지를 이해하고 입문해보려 한다.

더불어 지금 회사에서 인턴 생활을 하며 보고있는 코드가 NextJS를 기반으로 이루어진 코드이기 때문에 이를 이해하기 위해서는 필수불가결하게 NextJS를 이해해야만 했다(생계형 개발자).

참고자료 1 - Next.js 2.0] 간단한 React 전용 서버사이드 프레임워크, 기초부터 본격적으로 파보기, Velopert

참고자료 2 - 11. 서버 사이드 렌더링, 클라이언트 사이드 렌더링, Jaroinside

참고자료 3 - NextJS Getting Started, Nextjs.org

 

왜 NextJS인가?

우선 어떤 기술이 사용되는 이유를 알기 위해서는 그 기술이 왜 만들어졌는지를 이해해야 한다고 생각한다. 굳이 영어로 이야기하면 메커니즘을 이해해야 그 기술을 적재적소에 사용할 수 있기 때문이라고 할 수 있다.

그렇다면 Next.JS는 왜 만들어진 걸까?

가장 큰 이유는 리액트 프로젝트에서 SSR(Server Side Rendering)을 하기 위함이라고 할 수 있을 것이다. 그렇다면, 의문에 꼬리를 물어 리액트에서의 SSR을 이해해야 할 것이다.

또, 그러려면 웹 뷰 도구(React, Vue, Angular, etc..)을 사용하기 이전의 웹페이지에서 렌더링하던 방식을 알아야 한다. 그래서 먼저 웹페이지를 구동하는 방식에 대한 이해해보도록 하자.

웹페이지를 구동한다는 것은 특정 웹 페이지에 접속할 때, 그 페이지를 사용자 화면에 보여주는 것을 말한다. 여기까지를 E2E(End to End) 환경이라고 할 수 있고, E2E 환경에서 중요한 것 중 하나는 사용자가 보는 화면을 브라우저에 그려주는 렌더링이라는 작업이다.

그래서 프론트엔드에서 웹페이지를 구동할 때 가장 중요한 것은 어쩌면 "언제, 어떻게 렌더링을 할 것인가?"이지 않을까 하는 생각도 해본다.

 

전통적인 웹페이지 구동 방식

전통적인 웹페이지 구동 방식은 요청 시마다 새로고침과 함께 서버에 새로운 페이지에 대한 요청을 하는 방식을 말한다. 이때 View가 어떻게 보여질지를 서버에서 해석하여 보내주기 때문에 이를 '서버 사이드 렌더링'이라고 이야기한다. 이는 물건을 쟁여두지않고 필요할 때마다 사러가는 것과 같은 맥락이다(동네 장터).

과거의 웹 브라우저의 관점에서는 이것만으로도 충분할 것 같지만 기술의 발전으로 웹에서 제공하는 정보량이 많아지고, 이에 따라 여러 문제점이 발견되면서 전통적인 웹페이지 구동 방식과는 다른 SPA(Single Page Application)라는 기법이 등장하게 되었다.

 

SPA 구동 방식

SPA는 이름 그대로 처음에 하나의 빈 페이지(Single page)를 서버측에 제공하고, View에 대해서는 Client에서 특정 라이브러리 혹은 프레임워크를 사용해 렌더링하는 방식을 택했다. 이를 CSR(Client Side Rendering), '클라이언트 사이드 렌더링'이라고 말한다. CSR은 물건이 필요할 때마다 물건을 배송받는 것과 같다(쿠팡 로켓배송).

SSR과 CSR을 이런식으로 비교하여 설명하는 것은 처음에는 이해가 안될 수도 있지만, 간단히 View를 렌더링하는 위치가 서버냐 클라이언트냐에 따라 서버 사이드 혹은 클라이언트 사이드 렌더링이라고 이야기한다는 것을 알고 넘어가도록 하자. 둘의 차이는 아래에서 살펴보도록 하자.

여기서 주의할 점은 방금 이야기한 것은 우리가 앞으로 살펴 볼 SSR과 CSR가 아닌 전통적인 웹페이지 구동방식, SPA 구동 방식이다. 전통적인 웹페이지 구동방식에서는 SSR을 사용하고, SPA 구동 방식에서는 CSR을 사용한다는 것을 말하고 싶었다.

그리고 다음 문서에서 SSR과 CSR의 가장 큰 차이인 '초기 View 로딩 속도', 'SEO'에 대해 살펴보고 보다 확실하게 둘을 이해해보자.