Next.js란?
Next.js는 프로덕션용 React 프레임워크이다.
Next.js는 React.js의 풀스택 프레임워크이다.
Next.js는 React상에 구축된 프레임워크이다. 라이브러리와의 차이점으로는 프레임워크의 규모가 더욱 크다. 또한 더 많은 기능을 가지고 있으며 코드 작성법 파일 구조화 방법에 대한 보다 명확한 규칙과 가이드라인이 있다.
React 상에 구축된 프레임워크이기 때문에 React의 특성을 더 강화하는 면이 있다. 리액트에서는 직접 추가해야하는 기능들(라우팅 등)이 이미 추가 되어있기 때문이다. '프로덕션용'은 대규모 React 앱 구축을 더욱 쉽게 할 수 있는 점을 의미한다.
Next.js의 핵심기능
1. Server-side Rendering
Next.js의 가장 큰 핵심 기능은 바로 서버사이드렌더링이다.
서버사이드렌더링이란 클라이언트 측이 아닌 서버 측에서 렌더링이되는 콘텐츠 처리방식이다.
React의 경우 렌더링을 전부 클라이언트 측에서 처리한다(Client-side Rendering).
즉 서버가 아니라, 사용자의 브라우저에서 처리가 된다.
그 결과, 사용자가 페이지를 방문했을 때 서버에서 클라이언트 측으로 전송되는 HTML 코드에 별 내용이 없다.
그게 문제가 되나? (CSR의 문제점)
상황에 따라 문제가 될 수 있다.
화면 깜빡임으로 사용자의 사용성 저하
일부 데이터를 서버로부터 페칭할 때 클라이언트 측에서 JavaScript코드가 실행된 뒤에 데이터 페칭이 시작되기 때문에 전송된 요청의 회신을 대기하느라 로딩이 생긴다.
즉, 요청된 페이지가 아직 해당 데이터를 포함하지 않기 때문에 빈 페이지가 잠깐씩 보이는 것이다.
SEO에 불리함
검색엔진에 잘 노출되어야하고 많은 콘텐츠를 포함하고있는 대규모 이커머스 사이트의 경우 SEO가 굉장히 중요하다.
검색하는 사람들은 서버에서 전송하는 HTML만 볼 수 있는데, CSR는 서버에서 클라이언트 측으로 전송되는 HTML 코드에 내용이 없어서 검색에 노출되지가 않는다.
검색 엔진 사용자들이 콘텐츠를 볼 수 없다면? 그래서 방문자가 없다면? 큰 문제가 될 수 있다.
SSR의 좋은점
이런 경우 서버측 렌더링이 훨씬 더 유리하다.
해당 페이지가 서버에서 미리 렌더링이 되면
즉, 요청이 서버로 도달할 때 데이터 페칭이 서버측에서 이루어지면
모든 내용을 포함한 페이지가 사용자와 검색 엔진 사용자들에게 제공될 수 있기 때문이다.
Next.js와 React.js의 관계
Next.js에는 내장 SSR이 있어 자동으로 페이지를 미리 렌더링하기 때문에 아무 추가 설정 없이도 React 페이지, 컴포넌트를 서버측에서 미리 렌더링 해준다.
유의해야할 점은 Next.js를 사용하면 초기 로딩 혹은 초기 요청의 이후에 브라우저에 표준 React 앱이 여전히 실행 중이라는 것이다. 여전히 표준 싱글 페이지 애플리케이션(SPA)이다.
그 이후에 사용자가 페이지를 둘러보며 콘텐츠를 확인하는 이런 행동들은 브라우저 상에서 React가 모두 처리한다. 이를 통한 빠른 상호작용을 제공하는 것이 React의 역할인 것이다.
React 기존의 특징은 유지하면서, 초기 로딩 때 미리 렌더링된 페이지를 갖게 된다.
즉, 궁극적으로 Next.js를 사용하면 클라이언트측 및 서버 측의 코드가 융합된다고 볼 수 있다.
2. File-based Routing
NextJS를 사용하면, 파일과 폴더에 페이지와 라우트를 정의하게 된다.
NextJS 앱에는, 이름이 pages라고 설정되어야만 하는 폴더가 있는데.
pages폴더의 구조에 따라 Route가 설정된다.
따라서 React-router를 사용해 추가적인 코드를 작성하지 않아도 된다.
그러면서도 중첩 라우트, 다이나믹 라우트와 같은 기능들도 지원한다.
3. Fullstack 가능
NextJs를 사용하면 React에서 백엔드 코드를 쉽게 추가할 수 있다.
서버 측 사전 렌더링을 통한 클라이언트 측 코드뿐만 아니라
파일 시스템으로 작동을 하거나 데이터베이스로 전달이 되는 백엔드 코드도
NodeJS 코드를 통해 손쉽게 백엔드 API를 React 프로젝트로 추가할 수 있다.
데이터베이스, 혹은 파일로 데이터를 저장하는 코드나 데이터를 가져오거나 인증을 추가하는 등의 코드를 추가하는 작업이 NextJS를 사용하면 아주 간편해진다.
독립적인 REST API 프로젝트를 구축할 필요 없이 하나의 프로젝트에 머물면서 React 사용자 인터페이스인 클라이언트 측의 코드도 전부 추가할 수 있으며 백엔드 API 코드와도 융합이 가능하다.
