제가 처음으로 React 프로젝트를 만들기 시작했을 때, React Router를 작동시키는 데 엄청 애를 먹었던 적이 있습니다. 그러다가 Next.js를 가볍게 접하게 되었는데, 라우팅을 포함한 React 프로젝트의 다양한 부분들을 Next.js가 대신 해결해 준다는 것을 알게 되어 큰 매력을 느꼈던 바 있습니다. 오늘은 Next.js의 이론적 지식을 학습하고 이를 정리해보았습니다.
Next.js 소개
Next.js
Next.js는 개발 생산성을 위한 React 프레임워크입니다. 프레임워크는 문제 해결을 위한 다수의 내장 기능을 포함하고, 애플리케이션을 어떻게 만들어야하는지에 대한 명료한 가이드를 제시합니다.
Next.js는 다양한 기능들을 제공하는데, 이를 통해 대규모의 React 애플리케이션을 효율적이고 간편하게 제작할 수 있습니다.
또한 가장 중요한 것은 SSR(Server Side Rendering) 페이지를 구성할 수 있게 해준다는 것인데, 자세한 내용은 아래 Next.js의 장점을 살펴보면서 언급하겠습니다.
Next.js의 특징 - SSR
SPA(Single Page Application)의 단점
리액트는 SPA로서 사이트에 접속할 때 하나의 페이지를 불러옵니다. 따라서 최초에 페이지를 불러올 때, 필요한 모든 JS 파일을 한번에 불러옵니다.
SPA는 페이지를 이동하게 되면, 받아온 파일을 이용하여 UI를 변화시키고, 필요한 데이터는 서버에서 JSON 형태로 받아서 UI를 빠르게 변화시킬 수 있습니다.
하지만 SPA는 단점도 존재하는데, 모든 JS 코드를 불러와야 하기 때문에 처음 페이지를 불러올 때 시간이 상대적으로 오래 걸리게 됩니다.
뿐만 아니라, 모든 코드를 불러오는 과정을 거치기 때문에, 검색 엔진에 친화적이지 않습니다. SEO 최적화에 불리한 것이죠.
이러한 문제점들은 Next.js를 통해 서버 사이드 렌더링(SSR)을 구현함으로써 해결할 수 있습니다.
SSR의 특징
SSR은 사이트에 접속할 때 렌더링된 html을 불러오게 됩니다. 필요한 JS 파일을 모두 불러올 때까지 반응은 하지 않지만, 빠르게 화면의 골격을 구성하기 때문에 사용자들에게 처리 속도가 빠르다는 인상을 줄 수 있습니다.
html을 다룰 때 살펴보았듯이, html에는 SEO 최적화를 위한 메타 데이터들이 포함됩니다.
그런데 SSR에서는 이러한 html 파일을 우선적으로 불러오기 때문에, SEO 최적화에 강점을 가집니다.
물론 단점도 존재합니다. SSR은 페이지 이동 시 새로운 페이지를 요청하기 때문에 페이지 이동시 깜빡임이 존재하고, 템플릿을 중복해서 로딩하기 때문에 서버에 가해지는 부담이 상대적으로 큽니다.
Next.js는 SPA와 SSR의 단점을 해결하기 위해서 리액트에 SSR 기능을 더하여 SPA와 SSR의 장점을 가질 수 있도록 해주는 데 의의가 있습니다.
원래 리액트에 SSR 기능을 추가하려면 웹 서버를 만들어 주어야 하고, 웹팩 설정, 데이터 로딩, 코드 스플리팅 등 복잡한 과정을 필요로 합니다.
그러나 Next.js를 통해 이러한 것들을 설정하지 않고 사용할 수 있게 되는 것이죠.
Next.js의 장점
SSR에 대한 부분은 살펴보았으니, 다른 측면에서 Next.js가 어떤 강점을 가지는 지 한번 살펴보겠습니다.
1. Hot Code Reloading 지원
Next 개발 환경에서는 코드 변경 사항이 저장되면 응용 프로그램을 자동으로 다시 로드 및 컴파일합니다. 이를 통해 결과물을 효율적으로 분석할 수 있습니다.
2. 자동 코드 분할
자동 코드 분할 기능 덕분에 코드의 모든 가져오기가 번들로 묶여 각 페이지와 함께 제공됩니다. 결과적으로 불필요한 코드가 페이지에 로드되지 않게 됩니다.
3. 개발 환경 설정
Next.js는 CRA 프로젝트와 마찬가지로 웹팩과 바벨을 사용하고 있습니다. SSR 구현을 위한 웹팩과 바벨 설정이 기본으로 내장되어 있기 때문에 편리하게 프로젝트를 구성할 수 있습니다.
4. Typescript 내장
Next.js는 기본적으로 타입스크립트 사용을 지원합니다. 타입스크립트 설정을 따로 할 필요 없이 사용할 수 있으며 이를 통해 프로젝트의 코드 안정성을 높이기 용이합니다.
5. 파일 기반 네비게이션 가능 (라우팅)
리액트에서는 route를 위해서 react-router라는 라이브러리를 사용하여 라우팅 설정을 해주어야 합니다.
하지만 Next.js는 파일 시스템 기반 라우팅을 사용합니다. 폴더의 경로에 따라 페이지의 경로가 자동으로 설정되어 라우팅과 경로 관리가 편리하다는 장점이 있습니다.
