들어가기 앞서

이번 정리의 초점은 Next.js란 무엇인지, 어떤 문제를 해결하기 위해서 사용되는지를 중점적으로 정리 해보겠습니다.

1. Next.js란?

공식 NextJS 웹사이트인 nextjs.org에서는 프로덕션용 React 프레임워크라고 정의합니다. React에 대한 프레임 워크라는 정의가 다소 어색해 보일 수 있습니다. 쉽게 이해하기 위해서 한 가지 예시를 들어 보겠습니다.

React Application 에서 각 페이지에 대한 Routing이 필요하다고 생각해 봅시다. 이를 해결 하기 위해서는 일반적으로 react-router-dom 라이브러리의 추가 및 사용이 요구 됩니다. 하지만 Next.js를 사용한다면 Next.js에 내장된 라우팅 시스템을 이용하여 추가 서드파티 없이 개발을 진행 할 수 있습니다.

위에 설명한 간단한 예시 이외에도 서버사이드 렌더링 등 다양한 기능을 Next.js는 React개발에 필요한 기능들을 미리 추가하여 React 개발을 돕는 프레임워크 입니다.

2. 무엇을 해결 할 수 있는가?

SSR(서버사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)

Next.js가 무엇을 해결 할 수 있는지 설명하기 앞서 몇가지 개념에 대한 이해가 필요합니다.

렌더링(Rendering)

• 서버로부터 HTML,CSS, JS등 필요한 리소스 응답받아 DOM 트리를 생성합니다.
• DOM 트리를 생성하는 동안 CSSOM(CSS Object Model)이 생성 됩니다.
• DOM 트리와 CSSOM을 결합하여 Rendering Tree를 생성합니다.
• 레이아웃 단계에서는 뷰포트 내에서 각 요소의 정확한 위치와 크기 픽셀로 변환합니다.
• 마지막으로 렌더링 트리의 각 노드가 브라우저 화면에 출력됩니다.

SSR(Server Side Rendering)

SSR은 보편적인 렌더링 방식으로 사용자에 페이지에 접근하는 경우 서버에서 모든 렌더링이 완료되어 사용자에게 전달 됩니다.

장점

• 검색엔진 최적화(SEO)
• 초기로딩속도가 빠름

단점

• 서버 요청마다 새로고침 발생

CSR(Client Side Rendering) 사용자의 서버에서 Javascript를 전달받고 이를 사용자 브라우져에 실행 하여 Rendering을 수행합니다. 이후 필요 서버와는 Rendering에 필요한 데이터 주고 받으며 동작합니다.

장점

• 트래픽 감소와 빠른 인터랙션

단점

• 초기 구동 속도가 느리다.
• 검색엔진 최적화(SEO)가 어렵다.

React는 일반적으로 CSR(Client Side Rendering)형태로 동작합니다. 그렇다면 CSR동작의 단점을 가진다는 것을 의미합니다.

그렇다면 React를 SSR 방식으로 동작을 바꾸면 될까요?

예를 들어 React로 개발된 웹 쇼핑몰이 있다고 가정해 봅시다.

판매 상품 페이지가 웹에 잘 노출 되는 것은 매우 중요한 지표입니다. 하지만 구매 페이지는 결제에 대한 빠른 인터렉션이 중요할 것 입니다. 즉 각 페이지의 특성에 맞는 렌더링 방식이 제공되어야 한다는 것입니다.

물론 React에서도 SSR(Server Side Rendering)이 지원됩니다. 하지만 제대로 추가하는것이 상당이 어려울 수 있습니다.

이 문제를 Next.js에서는 쉽게 해결 할 수 있습니다.

외부 라이브러리 설치

앞선 설명에서 정리 하였지만 외부 라이브러리를 추가를 필요로 하는 Routing 기능을 Next.js에서는 내장 파일기반 라우팅으로 쉽게 해결 할 수 있습니다.

Full Stack

NextJS를 사용하면 개발자들이 React 프로젝트에 백엔드 코드를 추가하는 작업도 수월하게 해결 할 수 있습니다.

예를 들어 파일 시스템으로 작동을 하거나 데이터베이스로 전달이 되는 독립적인 백엔드 코드도 포함하는 풀스택 React 프로젝트가 있을 때 NextJS를 사용하면 NodeJS 코드를 통해 아주 쉽게 백엔드 API를 React 프로젝트로 추가할 수 있습니다