💡 NextJS란?
React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크
👉 SSR이 무엇인지 궁금하다면 이전 글을 참고하자
📌 Next.js의 특징 또는 장점
NextJs는 기본적으로 서버사이드 렌더링을 제공 한다는 점 이외에도 다음과 같은 여러가지 장점들이 있다.
1. 사전 렌더링 및 서버 사이드 렌더링
- Next.js는 기본적으로 빌드시에 만든 모든 페이지를 미리 렌더링 한다.
- 이렇게 만들어진 HTML은 처음 페이지를 불러올 때 사용자에게 빠르게 보이게 된다.
- HTML이 미리 렌더링 되어 SEO에도 좋다.
- HTML을 불러온 후에는 페이지에 필요한 최소한의 JS 코드를 불러와 페이지를 사용할 수 있게 된다.
- 서버의 데이터를 필요로 하는 페이지에 대해서는 요청 시에 서버 사이드 렌더링을 통하여 HTML을 생성하게 된다.
2. Hot Code Reloading을 지원하는 개발 환경, fast refresh
Next 개발 환경에서는 코드 변경 사항이 저장되면 응용 프로그램을 자동으로 다시 로드한다. 개발 모드일 때 소스코드를 저장하면 오른쪽 하단에 애니메이션 아이콘이 생기며, 이는 Next가 응용 프로그램을 컴파일 하고 있다는 것을 의미합니다.
3. 자동 코드 분할
자동 코드 분할 기능 덕분에 코드의 모든 가져오기가 번들로 묶여 각 페이지와 함께 제공된다. 결과적으로, 코드 분할은 코드 양을 줄이지 않고도 필요하지 않은 코드를 불러오지 않게 하여 초기 로딩에 필요한 Resource를 줄여준다. 따라서 초기 구동속도를 빠르게 하고 사용자들에게도 눈에 띄는 성능 향상을 지원한다.
4. 설정
Next는 기본적으로 웹팩과 바벨을 사용하고 있다. 웹팩과 바벨을 사용하여 서버 사이드 렌더링 및 개발에 필요한 설정이 이미 되어 있어 빠르게 개발을 시작할 수 있다. 사용하고 싶은 플러그인 또한 손쉽게 추가하여 사용할 수 있도록 지원하고 있다.
5. Typescript 내장
타입스크립트는 자바스크립트의 superset인 오픈소스 프로그래밍 언어이다. 기존의 자바스크립트 문법을 그대로 사용하면서 정적 타입 언어의 장점을 가질 수 있다. Next를 타입스크립트와 함께 사용할 때 타입 지원을 통해 편리함과 안정성을 얻을 수 있다. Next는 타입스크립트 설정을 따로 할 필요 없이 사용할 수 있으며 타입스크립트를 지원하고 있다.
6. 파일기반 네비게이션 기능
리액트에서는 route를 위해서 react-router라는 라이브러리를 사용하여 라우팅 설정을 해주어야 한다. 그로 인해 페이지의 경로에 대하여 직접 설정을 해주어야 했지만, Next는 파일 시스템 기반 라우팅을 사용한다. 폴더의 경로에 따라 페이지의 경로가 설정되어 구축이 빠르고 관리가 편리하다는 장점이 있다.
7. styled-jsx 지원
Next는 자체 CSS-In-JS인 styled-jsx를 지원합니다. 기본으로 제공하는 기능이기 때문에 스타일을 서버 사이드 렌더링 하기 위한 설정이 필요하지 않다.
