인프런 "한 입 크기로 잘라먹는 Next.js" 수강
☁️ Next.js
Next.js는 리액트 다음으로 와서 Next.js인가요??_
Next.js는 오직 리액트만을 위한 리액트 전용 웹 개발 프레임워크로, 기존 리액트보다 훨씬 넓은 범위에서 활용할 수 있도록 지원해준다.
😎: 근데 왜 이렇게 많이 쓰는 거예요..?
✍️: Next.js는 단순한 라이브러리가 아니라 프레임워크이기 때문이다!
프레임워크와 라이브러리의 차이
👉 핵심은 “기능 구현의 주도권이 누구에게 있냐”다.
- 리액트는 개발자가 주도권을 가지고 자유롭게 도구를 고르고, 원하는 기능을 마음껏 붙일 수 있다.
→ 자유도 높음 - Next.js는 프레임워크가 주도권을 쥐고 있어서, 제공하는 기능을 사용하거나 그 범위 내에서만 도구를 추가할 수 있다.
→ 자유도 낮음
😎: 근데 자유도가 높으면 좋은 거 아녀요?
✍️: 자유도가 높다는 건 기본 기능 외에는 제공하지 않는다는 의미다. 즉, 나머지는 모두 개발자가 직접 구현해야 한다는 것..!
반면 Next.js는 대부분의 기능을 기본 제공해주기 때문에, 개발자는 있는 기능들을 조합해서 쓰기만 하면 된다.
☁️ Next.js 사전 렌더링 이해하기
1. 사전 렌더링(Pre-rendering)이란?
브라우저가 요청하기 전에, 서버에서 HTML을 미리 만들어 응답하는 렌더링 방식
→ 기존 리액트의 Client Side Rendering 단점을 효율적으로 해결한다!
🔄 사전 렌더링 흐름
- 클라이언트가 요청을 보내면
- 서버에서 이미 완성된 HTML을 응답하고,
- 클라이언트가 그 HTML을 화면에 렌더링한다.
즉, 첫 화면을 빠르게 보여줄 수 있다!
2. Clinet Sid Rendering(CSR)이란?
클라이언트(브라웅저)가 직접 화면을 렌더링하는 방식
🔄 CSR 흐름
- 서버가 껍데기
index.html만 보냄 - 브라우저가 빈 화면을 띄움
- 서버가 JS 번들 전체를 전달
- 브라우저가 JS를 실행 → 리액트 앱을 그려줌
- 화면 표시 완료!
CSR 장점 & 단점
장점
- JS를 초기 실행 시에 다 받아오기 때문에, 페이지 이동이 엄청 빠르다.
단점
- 첫 화면이 뜨는 시간이 느리다(→
First Contentful Paint가 늦어지면 사용자 이탈 위험이 높아진다.)
3. Rendering
렌더링의 두 가지 의미
- 서버에서 JS를 실행해 HTML을 만든다. = "코드를 HTML로 변환"
- 클라이언트에서 화면을 띄운다. = "HTML을 브라우저가 그림"
사전 렌더링과 FCP
Next.js의 사전 렌더링은 HTML만 빠르게 보여주지만, 아직 상호작용 불가.
그래서 서버가 곧바로 리액트 앱(JS 번들)을 보내주고, HTML과 연결하는 과정을 거친다.
이 과정을 수화(Hydration) 이라고 부른다.
💧 Hydration
메마른 HTML 땅에 상호작용이란 비를 내려주는 것! 🌧
Hydration이 끝난 시점을 Time To Interactive(TTI)라고 한다.
4. 페이지 이동
사전 렌더링에서의 페이지 이동은?
👉 페이지 이동은 CSR 방식으로 처리된다.
- 페이지 이동 요청
- JS 실행 (컴포넌트 교체)
- 빠르게 페이지 교체
이게 가능한 이유는 처음에 JS 번들을 이미 다 받아놨기 때문이다!
☁️ 정리하며
Next.js는
- 리액트의 단점: CSR의 느린 FCP를 해결
- 리액트의 장점: CSR의 빠른 페이지 이동을 그대로 가져감
→ 두 가지 장점을 결합한 프레임워크다!
