React vs Next.js | aug-note

react와 next.js 모두 내가 프로젝트에서 사용하는 라이브러리/프레임워크 이다.

문득 프로젝트를 진행하며 어떤 프로젝트를 진행할때 어떤것이 더 알맞은가? 라는 생각이 들었다. 실제로 별 생각 없이 next.js 를 사용하던 내 모습을 보고 "왜 사용하는가?" 에 대한 의문을 이 포스팅을 작성하면서 해결해 보려고 한다.

성능적 차이

먼저 react는 facebook 에서 개발한 SPA 웹 어플리케이션 라이브러리이다.

에서도 라이브러리라고 소개하고 있는데, 실제로 react를 사용해 보면 /src 내부에서 소스 코드를 작성한다는 것 이외에는 하나부터 열까지 모두 개발자가 스스로 환경을 만들어 어플리케이션을 구성 해야 한다.

또한 CSR 방식으로 전체 페이지 렌더링에 필요한 리소스 들을 서버에서 받아와 클라이언트 측에서 렌더링을 수행한다. 따라서 페이지 간 전환이 매우 부드러워지지만, 초기에 모든 리소스를 받아와야 하기 때문에 초기 페이지 로딩이 느리다는 단점이 있다. 추가적으로 서버에서 빈 HTML을 받아와 클라이언트에서 렌더링을 진행하기 때문에, 검색엔진에서 크롤링이 어려워 SEO 가 어렵다.

이에 반해 next.js 는 react를 기반으로 한 프레임워크다. 따라서 라우팅 파일은 폴더 이름으로, 동적 라우팅시 [] 를 사용해라 등의 여러 규칙들을 지키며 개발을 해야 한다. 따라서 개발자 마다 다른 코드 컨벤션을 가진 react와 달리 어느 정도 일정한 규칙을 가지기 때문에 코드 유지 보수 / 개발 측면에 조금 더 용이하다는 장점이 있다.

그리고 가장 큰 차이인 SSR 방식으로 렌더링을 수행한다. 클라이언트 측이 아닌 서버 측에서 페이지를 렌더링 한 후 클라이언트로 완성된 페이지를 보내기 때문에 CSR 방식보다 화면 전환은 부드럽지 않아도 초기 페이지 렌더링이 빠르고, SEO 측면에서 유리하다.

언제 뭘 사용해야 하나?

그럼 위에서 살펴본 각 tool의 장단점을 고려해, 언제 어떤 것을 사용해야 하는지 한번 생각해보자.

우선 react의 장점은 유연한 어플리케이션 환경 구성과, 엄청나게 많은 reference에서 나온다. 기본적으로 라이브러리이기 때문에 프로젝트에서 필요로 하는 기능에 맞추어 개발이 가능하다. 하지만 반대로 많은 기능을 요하는 프로젝트라면 그만큼 많은 의존성 라이브러리들이 추가되어 오히려 어플리케이션 자체가 매우 무거워질 수도 있다.

따라서 필요한 프로젝트 규모가 크지 않아 필요한 의존성이 적고, 개발자 본인이 원하는 대로 환경을 구성하고 싶은 경우 (또는 회사 등에서 이미 규격화 된 컨벤션이 존재할 경우) react가 더 적합해 보인다.

next.js 의 장점은 SSR지원, SEO에 적합하며 클라이언트와 서버에서 사용하는 코드를 모두 작성 할 수 있어 서버를 보다 경량화 시킬 수 있다. 그리고 react 기반으로 개발된 프레임 워크기 때문에, react에서 사용 가능한 대다수의 라이브러리들은 next.js에서도 사용이 가능하다. 기본적으로 프레임워크이기 때문에 별다른 컨벤션을 정할 필요 없이 어플리케이션이 요구하는대로 소스코드를 작성하면 되기 때문에 규모가 큰 프로젝트에 적합하다.

따라서 이미 react 에 익숙하며, 규모가 커 기능적으로 추가될 요소가 많거나 SSR을 통하여 성능을 개선 시킬 여지가 있는 프로젝트에는 next.js가 적합할 것 같다.