NextJS는 React 프레임워크다.
말 그대로 React 앱을 더 편리하게 구축할 수 있도록 많은 기능을 제공한다.
NextJS는 React 앱에 많은 기능을 간단히 추가할 수 있다.
예를들면 React에서 라우팅을 하기 위해서 react-router 라이브러리를 설치해야 했는데 NextJS를 사용한다면 NextJS에서 제공하는 라우팅을 사용하면 된다.
그렇다면 NextJS의 주요기능과 이점은 무엇이 있을까?
서버 사이드 렌더링 (SEO 향상!)
NextJS에서 가장 중요한 기능은 서버 사이드 렌더링(SSR)을 내장하고 있다는 것이다.
React는 클라이언트 사이드 렌더링(CSR)이기 때문에 모든 렌더링은 클라이언트 쪽에서 일어난다.
사용자가 페이지를 방문할 때 서버에서 클라이언트로 전송되는 실제 HTML 코드는 상당히 비어있다.
예를들어 페이지가 서버에서 데이터를 받아와서 리스트를 화면에 보여줘야 한다면 사용자는 처음에 로딩 상태를 보게 될 것이다. 리스트 데이터를 서버에서 받아오는 요청을 진행하는 동안에 아주 잠깐 페이지가 깜빡일 것이다.
데이터 가져오기는 클라이언트 쪽에서 자바스크립트 코드가 실행될 때만 시작하기 때문이다. 그리고 이렇게 발송된 요청의 응답을 기다려야 한다.
단순히 요청한 페이지에 해당 데이터가 아직 포함되지 않았기 때문이다.
검색 엔진 경우에서도 검색 엔진 크롤러는 비어있는 초기 HTML 페이지만 보고 있기 때문에 문제가 될 수 있다.
이럴 때 서버 사이드 렌더링이 필요하다.
서버에서 해당 페이지를 사전 렌더링한 상태에서 서버에 요청이 들어 왔을 때 해당 데이터를 서버에서 가져오면 완성된 페이지가 사용자와 검색 엔진 크롤러에 제공된다.
그러면 사용자는 깜빡이는 로딩 상태를 보지 않아도 되고 검색 엔진도 해당 페이지 콘텐츠를 보게 될 것이다.
NextJS는 서버 사이드 렌더링이 내장되어 있기 때문에 자동으로 페이지를 사전 렌더링한다.
NextJS를 이용하면 초기 요청으로 읽어 들인 후에도 여전히 브라우저에서 기본 React 앱과 기본 싱글 페이지 애플리케이션을 실행할 수 있다.
즉, 사용자에게 빠른 대화형 인터페이스를 제공하는 React의 장점을 유지하면서도 초기 로딩에서는 사전 렌더링한 페이지를 받을 수 있다.
NextJS에서는 클라이언트와 서버 사이드 코드를 혼합한다는 뜻이다.
파일 기반 라우팅 제공
React에서 라우팅 기능을 사용하기 위해 react-router 라이브러리를 설치하였을 것이다.
NextJS에서는 라우팅 기능을 지원하는데, 파일과 폴더를 이용해서 페이지와 라우트를 정의한다.
NextJS는 중첩 라우팅이나 동적 매개변수를 이용한 동적 라우팅같이 우리에게 필요한 모든 기능을 지원한다.
풀스택 앱 빌드가 가능하다
NextJS는 풀스택 프레임워크이다.
NextJS를 사용하면 개발자가 React 프로젝트에 백엔드 코드를 쉽게 추가할 수 있다.
하나의 Next 프로젝트에 클라이언트 코드와 백엔드 API코드를 혼합하여 데이터를 저장하거나, 데이터를 받아오거나, 인증을 추가하는 등 모든 작업을 할 수 있다.
