내가 Next.js에 빠져버린 이유 | React.js의 한계, NextJS 장단점

내가 Next.js를 사용하게 된 계기는 상당히 단순했는데,  

포트폴리오 사이트를 만들어서 배포하고 싶은데 돈을 들여서 배포하고 싶지는 않았다. 

그래서 무료로 배포할 수 있는 서비스를 찾아보다가

vercel이라는 서비스를 알게 되었는데,

vercel이 Next.js 개발자들이 만들어서 Next.js에 특화되어 있었다. 

그래서 Next.js를 처음으로 사용해보게 되었다. 

 

Next.js를 사용하다보니 굉장히 흥미로운 기술이라는 생각이 들어

이번 기회에 Next.js에 대해 정리해보려고 한다. 

---

React.js의 한계

Next.js를 설명하기 전, React.js에 대한 설명을 안하고 넘어갈 수 없다. 

Next.js는 React.js의 한계를 보안하기 위해 나온 기술이기 때문이다. 

 

리액트는 현재 가장 인기있는 프론트엔드 라이브러리 중 하나이다. 

리액트는 SPA(Single Page Application)을 만들기 위해 사용한다. 

 

페이지를 이동할 때마다 서버로부터 새로운 HTML을 받아 화면 전체를 다시 렌더링하는 것이 아닌,

CSR(Client Side Rendering)로 기존 HTML의 일부만 업데이트하는 방식이기 때문에 

화면 전환이 빠르고 부드러워 좋은 사용자 경험을 제공할 수 있다. 

 

 

하지만 CSR로 페이지를 렌더링하게 되면

검색엔진 크롤러가 자바스크립트를 완전히 실행시키지 못하고 크롤링을 하게 되는 경우가 발생하여 

검색엔진이 해당 페이지를 인식하지 못하는 경우가 발생 할 수 있다. 

 

또한 초반에 모든 JS를 조회하기 때문에 페이지 최초 로드 시간이 오래 걸린다. 

그리고 모든 JS를 브라우저가 가지고 있어야 하기 때문에 메모리를 많이 차지한다. 

---

Next.js란?

앞서 설명한 문제를 해결하기 위해 만들어진 리액트 프레임워크가 바로 Next.js이다. 

Next.js는 SSR(서버 사이드 렌더링), SSG(정적 사이트 생성자) 기능을 제공하여 리액트의 성능 문제들을 보안한다. 

 

SSR(Server Side Rendering) 지원

Next.js는 서버에서 pre-rendering하여 브라우저에게 빈 HTML이 아닌 내용이 있는 HTML을 반환하는 기능을 제공한다. 

CSR과 결합하여 사용할 수 있기 때문에 SEO(검색엔진 최적화)가 필요한 페이지는 SSR을 사용하고 

사용자 경험이 중요한 부분은 CSR을 사용하여 서비스의 성능을 높일 수 있다. 

 

 

또한 SSR로 생성한 HTML을 서버에 캐싱할 수 있기 때문에 SSR을 사용하여도 로딩속도가 빠르다.

 

SSG(Static Site Generator) 지원

마이페이지처럼 사용자별로 내용이 다르게 나와야하는 페이지도 있지만 

회사 소개 사이트처럼 모든 사용자가 똑같은 내용을 조회하고, 해당 내용이 잘 바뀌지 않는 페이지도 존재한다. 

이런 경우 페이지의 HTML을 미리 만들어 두고 해당 페이지에 요청이 들어오면 미리 만들어둔 HTML을 바로 반환하는 식으로 서버 성능을 높일 수 있다. 

이러한 기능을 SSG라고 한다. 

 

SSG는 CDN(Content Delivery Network) 기술과 만나면 그 성능이 배가 된다. 

CDN이란 똑같은 콘텐츠를 가진 여러대의 서버를 두고, 사용자와 가까운 서버에서 콘텐츠를 제공하여 콘텐츠 제공 속도를 높이는 방식이다. 

SSG로 생성한 HTML들을 CDN에 업로드하여 페이지의 성능을 높일 수 있다. 

 

---

Next.js 장점

앞서 설명한 기능 외에도 Next.js는 여러 장점이 있다. 

 

파일 기반 라우팅, 내장 라우팅

Next.js는 파일 기반 라우팅을 제공한다. 

예를 들어 /app/posts/[postId]/page.tsx에 화면을 구현하면 브라우저에서 /posts/123에 접속시 구현한 화면이 뜬다. 

기존에는 라우트 파일을 만들어 라우팅해야 해서 유지보수가 어려웠는데, 

파일기반 라우팅을 사용하면 파일 위치만 신경쓰면 되니 훨씬 직관적이고 편리하다. 

 

풀스택 어플리케이션 구축 가능

Next는 API 라우팅을 지원하기 때문에 백엔드 API를 구현할 수 있다. 

따라서 Next만으로도 풀스택 웹 어플리케이션 구축이 가능하다.

 

리액트 생태계

리액트는 현재 전 세계적으로 가장 많이 사용하는 프론트엔드 프레임워크이기 때문에 리액트의 생태계가 매우 거대하다.

Next.js는 리액트 기반 프레임워크이기 때문에 리액트 관련 라이브러리들을 이용할 수 있다. 

---

Next.js 단점

학습곡선

Next.js를 처음 사용했을 때 onClick함수를 사용할 수 없어서 굉장히 당황했던 기억이 난다. 

Next에서는 디폴트 컴포넌트가 서버 컴포넌트인데, html로만 이루어진 정적인 페이지를 만들기 위한 컴포넌트로, 

브라우저에서 실행되는 js 코드가 포함되지 않는다. 

 

따라서 onClick과 같은 기능을 구현하기 위해서는 해당 컴포넌트를 클라이언트 컴포넌트(CSR하는 컴포넌트)로 변경하거나 Hydration이라는 과정이 필요하다. 

나는 이러한 사실을 몰랐어서 굉장히 답답했던 기억이 난다. 

 

이처럼 기존 React와 더불어 추가적인 Next.js의 지식이 필요하기 때문에 학습곡선이 높은 편이다. 

 

서버 비용 증가

페이지 초기에 빈껍데기HTML과 모든 JS를 반환하기만 하면 되는 리액트 서버에 비해

요청할 때마다 HTML 렌더링을 해서 반환해야하는 넥스트 서버가 더 많은 메모리를 사용할게 자명하다. 

 

또한 여러 편의 기능들을 제공하다보니 서버가 좀 무거운 편이다...^^

---

 

원래는 프론트엔드 프레임워크로는 Vue.js를 선호했는데

Next.js를 사용하고 Next.js의 장점에 대해 공부하니

나중에 프로젝트를 하게 되면 Next.js를 사용하지 않을까 싶다.