❗️해당 게시물은 인프런 "한 입 크기로 잘라먹는 Next.js(v15)"를 학습하고 정리한 내용입니다.
Next.js는 React.js 전용의 프레임워크이다.
React는 라이브러리이다.
라이브러리 vs 프레임워크
라이브러리
- 주도권을 개발자가 가짐
- 기능 구현을 원하는 방향을 진행한다.
- 쓰고 싶은 도구, 쓰고 싶은 기술을 쓴다.
- 자유도가 높다
프레임워크
- 주도권을 프레임워크가 가짐
- 프레임워크가 제공하는 기능을 이용하거나 허용하는 범위 내에서만 추가 도구 사용 가능
- 자유도가 낮다
React의 렌더링은 어떻게 진행될까?
즉, CSR 방식이다.
CSR
페이지 이동이 매우 빠르고 쾌적하다는 장점이 있다.
하지만 초기 접속 속도가 느리다
장점 : 초기 접속 이후의 페이지 이동이 빠름
단점 : FCP(초기 접속 속도)가 느림
JS Bundle
이 서비스에서 접근 가능한 모든 컴포넌트 코드 존재
FCP(First Contentful Paint)
"요청 시작" 시점으로부터 컨텐츠가 화면에 처음 나타나는데 걸리는 시간
요청시작 <---> 컨텐츠 렌더링
FCP는 웹페이지에 성능을 대표할정도로 굉장히 중요한 지표이다.
```
3sec 이상일 경우 : 이탈률 32% 증가
5sec 이상일 경우 : 이탈률 90% 증가
6sec 이상일 경우 : 이탈률 106% 증가
10sec 이상일 경우 : 이탈률 123% 증가
```
JS실행(렌더링)
자바스크립트 코드(React 컴포넌트)를 HTML로 변환하는 과정
화면에 렌더링
HTML 코드를 브라우저가 화면에 그려내는 작업
> ex) TTI가 3초가 걸렸다 하면 요청까지 수화되는데 3초가 걸렸다라는 말이다
사전 렌더링(Pre-rendering)
브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식
Client Side Rendering의 단점을 효율적으로 해결하는 기술
> React App단점해소(빠른 FCP 달성) + React App의 장점 승계(빠른 페이지 이동)
