💡 Next.js란?
React.js를 보다 더 강력하고 편하게 사용할 수 있는 기능들을 제공하는
프레임워크
기존 React에 페이지 라우팅, 빌트인 최적화 기능, 다이나믹 HTML 스트리밍 등의 기능을 더한 리액트의 확장판이다.
라이브러리 vs 프레임워크 차이
| 자유도 | 기능 구현 | 예시 | |
|---|---|---|---|
| 라이브러리 | 높다 | 쓰고 싶은 도구, 기술 사용 | React.js |
| 프레임워크 | 낮다 | 자체적으로 제공하는 기능 이용 | Next.js |
라이브러리는 개발자가 기능 구현의 주도권을 가진다. (자유도가 높다)
쓰고 싶은 도구와 기술을 사용하여 기능을 구현할 수 있다.
하지만 바꿔말하면 기본 기능 이외에는 제공하지 않는다는 의미이다.
예) React로 페이지 라우팅 기능 구현 -> React Router, TanStack Router 등 여러 선택지
프레임워크는 개발자가 기능 구현의 주도권을 거의 가지지 못한다. (자유도가 낮다)
프레임워크가 자체적으로 거의 모든 기능을 제공하기 때문에 자유도가 낮은 것이다.
자체 기능 + 허용하는 범위 내에서만 추가 도구 사용이 가능하다.
예) Next.js로 페이지 라우팅 기능 구현 -> Next.js가 제공하는 라우터(Page Router, App Router) 이용
💡 Next.js의 렌더링
렌더링이란?
렌더링이라는 용어는 다음과 같은 두 가지 상황에서 쓰인다.
- 자바스크립트 코드(React 컴포넌트)를 HTML로 변환하는 과정
- HTML 코드를 브라우저가 화면에 그려내는 작업
헷갈리지 않도록 주의하자.
렌더링 방식에는 CSR, Pre-rendering(SSR, SSG 등)이 있다.
그 중에 React.js에서는 CSR(Client Side Rendering)만 사용할 수 있으며, Next.js에서는 CSR도 사용할 수 있으나 Pre-rendering을 기본 방식으로 제공한다.
CSR (Client Side Rendering)
React.js의 기본적인 랜더링 방식
클라이언트(브라우저)에서 직접 화면을 렌더링하는 방식
첫 페이지를 요청하면 아무것도 없는 빈 화면을 먼저 렌더링한다. 이후에 JS 번들을 받은 뒤에 텍스트, 이미지, 영상 등이 표시되고 상호작용이 가능하게 된다. 첫 페이지에 유의미한 컨텐츠가 표시되는데 걸리는 시간(FCP)이 길다. 즉, 초기 접속 속도가 느리다.
초기 접속 이후에 일어나는 페이지 이동이 매우 빠르고 쾌적하다.
JS 번들을 받을 때 필요한 모든 코드를 받기 때문에, 페이지 이동을 하더라도 서버에 새로운 요청을 보낼 필요가 없이 브라우저에서 새로운 컨텐츠를 렌더링하기만 하면 되기 때문이다.
사전 렌더링 (Pre-rendering)
Next.js를 대표하는 기능 중 하나
브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식
FCP에 걸리는 시간이 길다는 CSR의 단점을 효율적으로 해결한다.
첫 페이지를 요청하면 서버에서 JS를 실행하여 렌더링이 완료된 HTML 파일을 보내준다. 클라이언트에서는 즉시 유의미한 컨텐츠가 포함된 첫 페이지(FCP)를 렌더링한다. 이후 JS 번들을 받아 수화(Hydration)을 거친 후에 상호작용이 가능해진다.
-> 현재 페이지에 필요한 JS 번들만 전달된다. 모든 페이지의 JS 번들을 전달하면 용량이 너무 크고 수화가 늦어지기 때문이다.
페이지 이동 요청은 CSR과 같은 방식으로 처리한다.
💡 렌더링 관련 용어
FCP (First Contentful Paint)
HTML, CSS, JavaScript 파일이 다운로드되고 브라우저가 초기 렌더링을 수행하여, 처음으로 콘텐츠(텍스트, 이미지, 비디오 등)가 화면에 표시되는 시점을 말한다. 웹 페이지의 성능을 측정하는 중요한 지표 중 하나로, FCP에 걸리는 시간이 증가할수록 사용자의 이탈률도 증가한다.
| FCP (sec) | 이탈률 |
|---|---|
| 3s 이상 | 32% 증가 |
| 5s 이상 | 90% 증가 |
| 6s 이상 | 106% 증가 |
| 10s 이상 | 123% 증가 |
이탈률 증가폭을 보면.. 첫 페이지를 렌더링하는데 웬만하면 5초 이상 걸리면 안 된다는 것을 알 수 있다.
TTI (Time To Interactive)
Pre-rendering의 경우 FCP 시점에는 HTML파일만 받은 것이기 때문에 인터렉션(상호작용)불가능하다.
이후 서버로부터 JS 번들을 받아 Hydration을 거친 후 상호작용이 가능해진다.
이렇게 상호작용까지 가능해진 시점을 TTI(Time To Interactive)라고 한다.
Hydration
HTML파일에 JavaScript를 통해 인터렉션이 가능하게 만들어주는 것이 마치 매마른 대지에 물을 주는 것과 비슷하다고 하여 수화(Hydration)라고 한다.
참고
한 입 크기로 잘라먹는 Next.js로 공부를 시작했다.
공부를 할 때 가장 중요한 것은 학습 자료 선정이라고 생각한다. 어떤 자료, 강의를 선택하느냐에 따라 학습에 걸리는 시간이 달라진다. 그런 점에서 강사님이 설명을 이해하기 쉽게 잘 해주셔서 마음에 드는 강의다.
사용한 그림 자료는 강의 자료를 토대로 복습 겸 Figma로 만들었다.
