React의 단점
- 페이지를 불러올 때 필요한 모든 js파일을 한번에 불러오기 때문에 시간이 오래 걸림
- 검색 엔진 봇이 사이트에 방문했을 때 contents를 제공하지 못하여 SEO에 취약
Next.js 사용이유
넥스트는 SPA와 SSR의 단점을 해결하기 위해서 리액트(SPA)에 SSR의 기능을 더하여 두개의 장점을 모두 가질 수 있다.
❓ 리액트에서 서버 사이드 렌더링 기능을 추가할 수는 없을까
👉 웹 서버를 만들어 주고 웹팩 설정, 데이터 로딩, 코드 스플리팅 등 복잡한 과정을 통해 서버 사이드 렌더링 기능을 추가할 수 있다.
👍 넥스트를 사용한다면 이러한 것들을 설정하지 않고 사용할 수 있다.
Next.js의 특징
사전 렌더링 및 서버 사이드 렌더링
넥스트는 기본적으로 빌드 시에 만든 모든 페이지를 미리 렌더링한다. 이렇게 만들어진 HTML은 첫 페이지를 불러올 때 사용자에게 빠르게 보이게 되고 HTML이 미리 렌더링 되기 때문에 SEO에도 좋다. 서버 데이터를 필요로 하는 페이지에 대해서는 요청 시에 서버 사이드 렌더링을 통하여 HTML을 생성한다.
Typescript 내장
Typescript는 기존의 Javascript 문법을 그대로 사용하면서 정적 타입 언어의 장점을 가질 수 있다. Next.js와 Typescript를 함께 사용할 때 타입 지원을 통해 편리함과 안정성을 얻을 수 있다. Next.js는 타입스크립트 설정을 따로 할 필요 없이 사용할 수 있으며 타입스크립트를 잘 지원하고 있다.
파일 기반 내비게이션 기능
Reac에서는 라우트를 위해 'react-router'라는 라이브러리를 사용하여 라우팅 설정을 해줘야 한다. 그로 인해 페이지의 경로에 대하여 직접 설정을 해주어야 하였지만, Next.js는 파일 시스템 기반 라우팅을 사용한다. 폴더의 경로에 따라 페이지의 경로가 설정되어 구축이 빠르고 관리가 편리하다.
설정이 필요없다
Next.js는 기본적으로 웹펙과 바벨을 사용하고 있다. 웹팩과 바벨을 사용하여 SSR 및 개발에 필요한 설정이 되어 있기 때문에 빠르게 개발을 시작할 수 있다. 또한, 사용하고 싶은 플러그인이 있다면 손쉽게 추가하여 사용할 수 있또록 지원하고 있다.
styled-jsx 지원
자체 CSS-in-JS인 styled-jsx를 지원한다. 기본으로 제공하는 기능이기 때문에 스타일을 SSR 하기 위한 설정이 필요하지 않다.
자동 코드 분할
자동 코드 분할 기능 덕분에 코드의 모든 가져오기가 번들로 묶여 각 페이지와 함께 제공된다. 결과적으로, 불필요한 코드가 페이지에 로드되지 않는다.
Hot Code Reloading을 지원하는 개발 환경
코드 변경 사항이 저장되면 응용 프로그램을 자동으로 다시 로드한다. 개발 모드일 때 소스코드를 저장하면 오른쪽 하단에 삼각형 애니메이션이 생기는데 이는 Next.js가 응용 프로그램을 컴파일 하고 있다는 것을 알려준다.
