Next.js란?

 

Next를 사용하는 이유

React는 페이스북에서 개발한 오픈소스 라이브러리로, '컴포넌트'를 사용하여 UI(User Interface)를 효율적으로 만들기 위한 프레임워크입니다. 그리고 Next는 React 기반 프레임워크로 개발자에게 뛰어난 생산성과 편의성을 제공합니다. React 기반 프레임워크이기 때문에 React에 대한 기본적인 지식을 필요로 합니다. React만으로도 프론트엔드 개발을 할 수 있는데, 왜 Next를 사용해야 할까요? 그 이유는 React의 단점에서 찾아볼 수 있습니다.

 

 

React의 단점(SPA의 단점)

React는 싱글 페이지 애플리케이션(SPA으로서 사이트에 접속할 때 하나의 페이지를 불러옵니다. 페이지를 불러올 때 필요한 모든 자바스크립트 파일을 한 번에 불러옵니다. SPA는 페이지 이동을 하게 되면, 받아온 파일을 이용하여 UI를 변화시키고, 필요한 데이터는 서버에서 JSON 형태로 받아서 UI를 빠르게 변화시킬 수 있습니다. 이러한 특징으로 인하여 사용자 경험(UX)이 좋습니다. 하지만 이러한 특징은 SPA의 장점이자 단점이 됩니다. 모든 자바스크립트 코드를 불러와야 하기 때문에 처음 페이지를 불러올 때 시간이 오래 걸리게 됩니다.

SPA에서의 페이지 요청 시 작동

 

또한, SPA는 검색 에진 최적화(SEO)에 좋지 않습니다. 검색 엔진 봇이 사이트에 방문하였을 때 콘텐츠를 제공하지 못하여 사이트를 파악하는 데 어려움이 있습니다. 이 두 가지 문제를 서버 사이드 렌더링(SSR)을 사용함으로써 해결할 수 있습니다.

 

서버 사이드 렌더링은 사이트에 접속할 때 렌더링된 html을 불러오게 됩니다. 필요한 자바스크립트 파일을 불러올 때까지 반응은 하지 않지만, 빠르게 화면을 보일 수 있기에 속도가 빨라 보이게 됩니다. 검색 엔진 봇에 렌더링 된 html을 제공하여 SEO에 좋습니다. 하지만 서버 사이드 렌더링은 페이지 이동 시 새로운 페이지를 요청하기 때문에 페이지 이동 시에 깜박임이 존재합니다. 또한, 페이지 이동 시 템플릿을 중복해서 로딩하고, 서버 사이드 렌더링을 하는 것이 서버에 부담을 주기 때문에 성능상 좋지 않다는 단점을 가지고 있습니다.

 

Next는 SPA와 SSR의 단점을 해결하기 위해서 React(SPA)에 서버 사이드 렌더링 기능을 더하여 SPA와 SSR의 장점을 가질 수 있게 됩니다. React에 서버 사이드 렌더링 기능을 추가하려면 웹 서버를 만들어 주어야 하고, 웹팩 설정, 데이터 로딩, 코드 스플리팅 등 복잡한 과정을 필요로 합니다. 하지만, Next를 사용한다면 이러한 것들을 설정하지 않고 사용할 수 있게 됩니다. 이러한 개발 환경을 설정하는 번거로움을 줄일 수 있는 것이 Next의 특징 중 하나입니다.

 

 

Next의 특징

#1. 사전 렌더링 및 서버 사이드 렌더링

Next는 기본적으로 빌드 시에 만든 모든 페이지를 미리 렌더링 합니다. 이렇게 만들어진 HTML은 처음 페이지를 불러올 때 사용자에게 빠르게 보이게 됩니다. HTML이 미리 렌더링 되어 SEO에도 좋습니다. HTML을 불러온 후에는 페이지에 필요한 최소한의 자바스크립트 코드를 불러와 페이지를 사용할 수 있게 됩니다. 서버의 데이터를 필요로 하는 페이지에 대해서는 요청 시에 서버 사이드 렌더링을 통하여 HTML을 생성하게 됩니다.

 

#2. Hot Code Reloading을 지원하는 개발 환경

Next 개발 환경에서는 코드 변경 사항이 저장되면 응용 프로그램을 자동으로 다시 로드합니다. 개발 모드일 때 소스코드를 저장하면 오른쪽 하단에 다음과 같은 삼각형 애니메이션이 생기는 것을 보실 수 있습니다. 이는 Next가 응용 프로그램을 컴파일하고 있다는 것을 알려줍니다.

캡쳐하기 위해 연속으로 소스코드를 저장한거라 버벅임이 있습니다.

 

#3. 설정이 필요 없음

Next는 기본적으로 웹팩(webpack)과 바벨(babel)을 사용하고 있습니다. 웹팩과 바벨을 사용하여 서버 사이드 렌더링 및 개발에 필요한 설정이 이미 되어 있어 빠르게 개발을 시작할 수 있습니다. 또한, 사용하고 싶은 플러그인이 있다면 손쉽게 추가하여 사용할 수 있도록 지원을 하고 있습니다.

 

#4. Typescript 내장

Typescript는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어입니다. Typescript는 기존의 자바스크립트 문법을 그대로 사용하면서 정적 타입 언어의 장점을 가질 수 있습니다. Next를 Typescript와 함께 사용할 때 타입 지원을 통해 편리함과 안정성을 얻을 수 있습니다. Next는 Typescript 설정을 따로 할 필요 없이 사용할 수 있으며 Typescript를 잘 지원하고 있습니다.

 

#5. 파일기반 내비게이션 기능

React에서는 라우트를 위해서는 'react-router'라는 라이브러리를 사용하거나 다른 방법으로 라우팅 설정을 해주어야 합니다. 그로 인해 페이지의 경로에 대하여 직접 설정을 해주어야 했지만, Next는 파일 시스템 기반 라우팅을 사용합니다. 폴더의 경로에 따라 페이지의 경로가 설정되어 구축이 빠르고 관리가 편리하다는 장점이 있습니다.

 

#6. styled-jsx 지원

Next는 자체 CSS-in-JS인 styled-jsx를 지원합니다. Next에서 기본으로 제공하는 기능이기 때문에 스타일을 서버 사이드 렌더링 하기 위한 설정이 필요하지 않습니다.

 

 

 

References

클론 코딩으로 시작하는 Next.js (이창주)

[Next.js] 페이지 구조