출처
Next.js 공식문서
공식문서 영어 어휘 정리 노션 페이지
1. Next.js 소개
풀스택 웹 개발을 위한 리액트 프레임워크이다.
1-1. 웹 어플리케이션 개발 시 고려사항들
아래 리스트는 현대 어플리케이션을 개발할 때 고려해야하는 사항들이다.
- 유저 인터페이스
어떻게 유저가 어플리케이션을 사용할 지 고려
- 라우팅
유저가 어떻게 어플리케이션의 페이지들을 이동할 지
- 데이터 불러오기
어디에 데이터를 저장하고 어떻게 가져올 지
- 렌더링
언제 어디에서 동적/정적인 컨텐츠를 표시할 지
- 어떻게 외부 라이브러리와 연동할 지
콘텐츠 관리 시스템(CMS), 사용자 인증(Auth), 결제 시스템(Payments) 등
- 기반 시설
어디에 어플리케이션을 저장하고, 배포하고, 코드를 보관할 지 결정할 지(서버리스, CDN, Edge 등)
- 성능
어떻게 성능을 최적화시킬 지
- 확장성
데이터, 유저, 트래픽이 늘어남에 따라 어떻게 어플리케이션을 확장할 지
- 개발자 경험
어떻게 편하게 어플리케이션을 개발할 수 있는 지
만약 리액트에서 각각의 기능을 구현하려면 일일이 라이브러리를 찾으며 설치해야 한다.
1-2. Next.js란?
앞서 말했듯, 웹 어플리케이션을 개발하기 위한 리액트 프레임워크이다.
프레임워크로서 Next.js는 React 구성 요소, 도구들을 다루고, 다른 기능들과 최적화를 제공한다.
다시 말하면, Next.js를 통해 라우팅, 데이터 불러오기, 라이브러리 통합 등과 같은 어플리케이션에 필요한 사항들에 대한 문제를 해결할 수 있다.
2. 어떻게 Next.js가 동작하는 지
개발환경에서는 타입스크립트, ESLint 통합, Fast Refresh를 지원한다.
배포환경에서는 코드를 효율적으로 동작하게 할 수 있도록 next.js가 최적화를 해준다.
2-1. Next.js 컴파일러
JSX나 타입스크립트 같은 언어들을 자바스크립트로 Next.js에서 컴파일해준다.
Next.js에서는 코드를 편집할 때 개발환경에서 컴파일하고 프로젝트를 빌드할 때도 배포를 위한 컴파일링을 해준다.
2-2. 코드 압축
작성한 코드에서 불필요한 요소(주석, 띄어쓰기, 들여쓰기 등) 제거해준다.
Next.js에서는 자바스크립트와 CSS 파일을 자동으로 압축해준다.
2-3. 번들링
작성한 자바스크립트/타입스크립트 코드, CSS 코드, html 코드 등 모듈화한 다양한 코드들을 한되 모아준다. 이렇게 함으로써 유저가 페이지에 들어왔을 때 다운받아야 하는 파일의 수를 줄일 수 있다.
2-4. 코드 스플리팅(splitting)
웹 사이트를 개발할 때 다수의 페이지에 적용될 코드들을 다른 URL을 통하여 나눈다. 각각의 페이지들은 어플리케이션 내에서 고유한 진입점이 되어준다.
코드 스플리팅은 어플리케이션의 코드 번들을 더 작은 덩어리로 만들어 각각의 진입점에 넣어주는 작업을 말한다. 이렇게 함으로써 어플리케이션을 처음 로드할 때 로딩 시간을 개선할 수 있다.
Next.js에서는 pages/ 디렉토리를 통해 자동으로 코드를 나눌 수 있게 해준다.
2-5. Next.js를 활용한 렌더링
리액트로 작성한 JSX 코드를 HTML에 사용되는 코드로 바꿔주는 것을 렌더링이라고 한다.
렌더링은 클라이언트나 서버 사이드에서 실행된다. 또한 빌드되는 시점이나 런타임 내 매 요청마다도 실행할 수 있다.
Next.js를 사용하면, 서버 사이드 렌더링, 정적 사이트 생성, 클라이언트 사이드 렌더링을 원하는 페이지에 각각 구현할 수 있다.
1) Pre-Rendering
서버 사이드 렌더링과 정적 사이트 생성은 외부 데이터를 불러오고 리액트 컴포넌트 코드를 HTML로 변환하는 과정을 클라이언트 사이드로 제공하기 전에 실행하기에 Pre-Rendering으로 여겨진다.
2) 클라이언트 사이드 렌더링 vs Pre-Rendering
일반적인 리액트 어플리케이션에서는 브라우저는 빈 HTML 껍데기를 서버로부터 받고 자바스크립트 코드를 통해 UI를 생성한다. 이러한 방식을 클라이언트 사이드 렌더링이라 한다.
어플리케이션에 처음 들어온 순간에 유저 디바이스에 렌더링이 발생하기 때문이다.
반면에, next.js를 사용하면 pre-rendering을 매 페이지에 기본적으로 구현할 수 있다. 아까 언급했듯, HTML을 서버에서 미리 생성해서 유저에게 제공하는 방식을 말한다.
모든 자원들이 로드되기 전 까지는 빈 화면을 보게되는 클라이언트 사이드 렌더링과 달리 pre-rendering을 적용한 어플리케이션에서는 이미 만들어진 HTML을 보게된다.
3) 서버 사이드 렌더링
서버 사이드 렌더링을 통해 매 요청마다 서버에서 HTML 파일을 생성한다. 생성된 HTML, JSON 데이터, 자바스크립트 코드는 생성하는 페이지를 상호작용 가능하게 만들고 클라이언트에게 보내준다.
클라이언트 쪽에서는 HTML만 사용했다면 상호작용 없는 페이지만 생성되지만 JSON 데이터와 자바스크립트를 사용하는 리액트를 통해 페이지를 상호작용할 수 있게 만들 수 있다. 이러한 과정을 hydration이라 한다.
Next.js에서는 다음 메서드를 사용해 구현할 수 있다.
getServerSideProps
4) 정적 사이트 생성
HTML은 서버에서부터 생성되지만 서버 사이드 렌더링과는 다르게, 런타임에 서버가 관여하지 않는다. 컨텐츠들은 빌드할 때 딱 한 번만 생성되며 HTML은 CDN에 저장되고 매 요청마다 재사용된다.
Next.js에서는 다음 메서드를 통해 구현할 수 있다.
getStaticProps
