Next.js란?

Next.js는 리액트에 웹 개발 필수 기능을 덧붙인 "프레임워크"다.
(React의 확장판 개념)

카카오웹툰, 벨로그, OP.GG, 인프런, 랠릿 등
많은 대형 서비스들이 Next.js를 사용하고 있다.

리액트(라이브러리) vs 넥스트(프레임워크)

React = 라이브러리

UI에만 집중하는 도구

• 화면(View) 렌더링만 담당
• 라우팅, 상태관리, 빌드, 서버 기능을 기본으로 제공하지 않음
• 개발자가 직접 필요한 도구를 선택
• 자유도는 높지만, 직접 구성해야 할 게 많음

예:

라우터도 React Router, TanStack Router 등 마음대로 선택 가능

Next.js = 프레임워크

웹 개발에 필요한 기능을 전부 포함한 구조

• 페이지 라우팅 내장

• 서버 사이드 렌더링 지원

• 이미지 최적화, API 라우트 제공

• 빌드 설정 자동화

• 정해진 구조 안에서 개발

  예:

라우팅은 반드시 Next.js 방식(Page Router, App Router) 사용

빠르게 서비스 만들 땐 👉 Next.js
구조 자유롭게 커스터마이징 👉 React

사전 렌더링 (Pre-rendering)

서버에서 HTML을 미리 생성하여 브라우저에 전달하는 방식
CSR의 단점(초기 로딩 지연 및 검색엔진 최적화 한계)을 개선하기 위해 사용된다.

전에 Client Side Rendering에 대해 알아보자!

Client Side Rendering(CSR)

리액트에서의 기본적인 렌더링 방식으로,
서버가 HTML을 완성하지 않고, 브라우저가 JS를 받아서 화면을 스스로 그리는 구조다!

작동 구조

1. 브라우저가 서버에 요청
2. 서버는 비어 있는 HTML + JS 파일 제공
3. 브라우저가 JS Bundle 실행
4. 화면 렌더링

서버로부터 비어 있는 HTML과 JS Bundle을 받은 후,
브라우저가 JavaScript를 실행하여 화면을 완성하는 방식

JS Bundle?

뜻 그대로 여러 개의 javascript 파일을 하나로 묶은 결과물

이유

React 프로젝트에는 수십 개의 JS 파일이 있다.
이것을 개별 요청하면 성능이 떨어짐.

그래서 빌드 도구(Webpack, Vite, Rollup 등)가
모든 파일을 하나(또는 소수)로 묶는다.

최초에만 서버에서 html과 js를 받고 이후 화면 렌더링은 전부 브라우저에서 수행한다!
단, 데이터 요청은 계속 서버와 통신함!

그러니까 장점이 초기 접속 이후의 페이지 이동이 빠름

그래서 단점이 뭔데?

바로 초기 접속 속도인 FCP가 느리다는 점~

FCP (First Contentful Paint)

요청 시작 시점에서 컨텐츠가 화면에 처음 나타나는데 걸리는 시간

그것을 해결하기 위해 나온 것이 바로 사전 렌더링 이라는 것이야~

서버에서 HTML을 미리 만들어 보내기 때문에
브라우저는 곧바로 콘텐츠를 표시 가능.

👉 FCP 대폭 개선

수화(Hydration)

사전 렌더링된 HTML은 보이기만 할 뿐, 클릭이 안 됨

그래서

서버에서 JS Bundle을 다운로드하고
HTML과 연결되어 이벤트가 살아난다.

마치
말라 있던 HTML 요소들에 JavaScript라는 물을 붓는 느낌..?..?

그래서 이름이 수화!

TTI(Time To Interactive)

사용자가 실제로 상호작용이 가능해지는 시점

페이지 이동 요청은 CSR과 동일한 방식으로 서버로 이동하지 않고 브라우저에서 JS를 실행해 처리하게 된다.
왜냐하면 수화(Hydration) 과정에서 서버가 브라우저에게 JS Bundle을 줬기 때문이다

최종 정리

Next.js는 사전 렌더링을 통해 초기 화면(FCP)을 개선하고,
Hydration 이후 CSR 방식으로 빠른 페이지 이동을 제공하여
사용자 경험을 크게 향상시킨 프레임워크이다.