Next.js란 무엇일까요?

홈페이지 대문에는 이렇게 적혀있습니다.

• The React Framework for Production.

React의 프레임워크라고 나와있네요.
그렇다면 React는 무엇일까요?

• A JavaScript library for building user interfaces
• 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

React는 라이브러리라고 나와있네요. 🤔

그럼 다시 Next.js의 정의로 돌아와서 생각해보면,

• React 코드를 사용해 컴포넌트와 기능들을 만들것이고
• 프레임워크이기 때문에 많은 기능들을 제공해줄 것이고
• 어떻게 기능들을 활용하는지 가이드라인을 제시해줄 것입니다
• 출시를위한 프레임워크이기 때문에 많은 문제를 해결해줄 것이라고 생각해볼 수 있습니다.

특징 1. SSR

리액트는 CSR이기 때문에 랜더링은 클라이언트쪽에서 이루어집니다. 리액트로 만들어진 앱에서 브라우저의 검사탭에서 소스를 보게 되면 index.html을 찾을 수 있습니다. 하지만 코드는 텅텅 빈 껍데기의 코드인 것을 알 수 있는데요.
리액트 앱에서 새로고침을하면 계속해서 데이터를 요청하게 되는식입니다. 다시말하면 처음 유저가 접속 시 빈 화면을 보고, 요청에 따라서 데이터가 채워지는 형식입니다.

이게 큰 문제가 되지 않는다고 생각할 수 있지만 치명적인 단점이 존재합니다. SEO(검색엔진최적화)를 할 수 없다는 점입니다. 리액트 앱은 빈 껍데기 HTML 코드만 가지고 있고, 크롤러는 JS 코드로 구성된 리액트앱을 읽을 수 없습니다.

이 문제를 해결해주는게 SSR입니다. 리액트 페이지, 리액트 컴포넌트들을 서버단에서 미리 렌더링한 후 사용자에게 전송합니다.
(리액트에는 ReactDomServer라는 기능이 있지만 사용하기 까다롭다는 단점이 있습니다.)

특징 2. 파일 기반 라우팅

리액트를 사용하면서 React-Router를 사용해서 페이지를 라우팅할 수 있었습니다. 하지만 Next.js에서는 파일, 폴더를 기반으로해서 라우팅을 할 수 있습니다. 더 이상 코드기반 라우팅이 아닙니다!
조금 더 간결한 코드, 번거러움이 줄어들고, 직관적이게 됩니다.

특징 3. Full-stack 앱

Next-js 는 쉽게 백엔드 코드를 리액트 앱에 추가할 수 있게됩니다. 데이터를 저장하고 주고받기, 사용자 인증 등 백엔드 기능을 리액트 프로젝트에 추가할 수 있게됩니다.