1. Next.js 개요

Next.js는 React로 웹 애플리케이션을 개발할 때 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 등을 간단히 구현할 수 있도록 도와주는 React 기반 프레임워크로 웹 애플리케이션을 빠르게 개발하고 배포할 수 있도록, 라우팅, 성능 최적화, 빌드, 배포 환경 등의 기능을 기본적으로 제공하고 있다.

즉, React 라이브러리의 프레임워크로 Next.js로 풀스택 개발이 가능하다.

2. 기존 React

React는 기본적으로 CSR(Client Side Rendering)이기 때문에 웹사이트를 요청할 때 빈 html을 가져와 script를 로딩하기 때문에 (CSR인 React App에서 cmd+option+u를 눌러서 소스코드를 확인해보면 빈 <div>태그만 있는 것을 확인 가능하다), 첫 로딩 시간도 오래걸리고 SEO(Search Engine Optimization)에 취약하다는 단점이 있다.

3. React with Next.js

3-1) 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)

• React는 기본적으로 클라이언트 사이드 렌더링(CSR)에 중점을 두고 있습니다. 브라우저가 초기 HTML만 받고 나서 JavaScript를 다운로드하고 실행해야 화면이 완성되는 구조이다.
• Next.js는 SSR을 간편하게 설정할 수 있도록 도와주어, 초기 로딩 속도를 개선하고 검색 엔진이 페이지를 더 쉽게 크롤링할 수 있도록 한다. 또한 필요한 페이지를 빌드 시점에 미리 정적 페이지로 만들어 배포할 수 있는 SSG 방식도 지원한다.

3-2) 자동화된 라우팅(File-based Routing)

• React로 라우팅을 구현하려면 react-router 등을 별도로 사용해야 한다.