SPA 프레임워크 혹은 라이브러리 중에서 단연 React가 가장 인기가 좋다. Vue.js도 사용해보았지만 나는 왠지 함수형으로 표현된 React가 가장 가독성이 좋게 느껴진다. 리액트에 대한 애정도도 점점 높아지는거 같다. 리액트도 좋지만 넥스트는 더 좋은거 같다.
이번 기회에 넥스트의 기능들에 대해서 좀 더 자세히 알아보자.
1. Next.js 란?
next.js공홈 메인에 쓰여진 글이다. 정말 크게 프로덕션을 위한 리액트 프레임워크라고 소개되어있다.
이 부분만봐도 '리액트를 사용한 프레임워크구나'라는 것을 확연히 알 수 있다.
부연 설명으로 서버사이드 렌더링, 타입스크립트 지원, 스마트 번들링, 라우트 프리패칭 등등을 지원한다고 적혀있다.
이처럼 리액트는 오직 뷰만 담당하는 것과는 다르게 프레임워크답게 다양한 기능들을 제공한다.
2. Next.js의 등장
React는 Virtual DOM이라는 가상돔 개념을 도입했고 리플로우와 리페인트를 최소화해 빠른 성능을 보여주는 Client Side Rendering을 구현하였다.
대신 이 CSR은 첫 로딩시 HTML,CSS,JS를 모두 로드하여 렌더트리를 구성해야 하기 때문에 초기 구동이 느리다.
또한 빈 HTML을 받아와 script파일을 읽어들여 동적으로 돔을 생성하기 때문에 SEO관점에서 매우 불리하다.
이러한 단점들을 해결하기 위해
Next.js에서는pre-rendering을 도입하여 해결한다.
프리렌더링 기능을 이용해 페이지를 미리 렌더링하여 SEO문제점을 해결하게 도와준다.
3. Next의 주요기능
3.1 서버사이드 렌더링
서버사이드 렌더링이야 말로 Next의 💐이라고 할 수 있다. 클라이언트 대신 서버에서 페이지를 미리 렌더링해주는 기능이다. 페이지가 서버 사이드에서 미리 렌더링 되기 때문에 data-fetching역시 서버에서 이루어진다.
3.2 파일 기반 라우팅
React는 리액트라우터라는 라이브러리를 통해 해결해야하지만 내장된 파일 기반 라우팅 기능으로 간단하게 구현이 가능하다.
3.3 리액트 애플리케이션 빌드
Next.js에서는 풀스택 프로젝트를 쉽게 구현할 수 있는 기능을 제공한다.
Node.js를 통해 자체적으로 쉽게 백엔드 API를 삽입할 수 있다.
다음 챕터부터는 Next.js 튜토리얼을 진행하면서 더 많은 기능들에 대해서 알아보자.
