본 포스팅은 인프런의 '한 입 크기로 잘라먹는 Next.js 강의를 바탕으로 작성되었습니다.
https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs/dashboard
1. Next.js는 어떤 기술일까?
Next.js는 React.js의 확장판으로, React.js에
- 페이지 라우팅
- 빌트인 최적화 기능
- 다이나믹 HTML 스트리밍 기능
이 더해진 것이다.
여기서 Next.js는 Library가 아닌 Framework라는 점에 주목하자. React는 UI개발을 위한 JavaScript "Library"이고, Next는 Framework이다.
[기능 구현의 주도권이 누구에게 있는가?]
- Framework : 주도권을 Framework가 가짐 -> 프레임워크가 제공하는 기능을 이용하거나 허용하는 범위 내에서만 추가 도구 사용 가능 : 자유도가 낮지만, 거의 모든 기능을 제공한다.
- Library : 주도권을 개발자가 가짐 -> 기능 구현을 원하는 방향으로 진행할 수 있다. : 자유도가 높으나 기본 기능 외 제공하지 않는다.
이렇게 Framework와 Library의 차이와 함께 Framework로서의 Next.js에 대해 접근해볼 수 있다.
2. 사전 렌더링 이해하기
사전 렌더링 : 브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식
React의 Client Side Rendering 이해하기
Client Side Rendering(CSR) : React.js 앱의 기본적인 렌더링 방식, 클라이언트에서 직접 화면을 렌더링하는 방식
→ JS Bundle 안에 이 서비스에서 접근 가능한 모든 컴포넌트 코드 존재
-> 초기접속 이후의 페이지 이동이 매우 빠름.
이후에는 빠르게 가능
그러나, '초기 접속 속도가 느리다'는 치명적인 단점이 있음.
FCP (First Contentful Paint)
"요청 시작" 시점으로부터 컨텐츠가 화면에 처음 나타나는데 걸리는 시간 (요청시작 <-> 컨텐츠 렌더링)
- 3sec 이상일 경우 : 이탈률 32% 증가
- 5sec 이상일 경우 : 이탈률 90% 증가
- 6sec 이상일 경우 : 이탈률 106% 증가
- 10sec 이상일 경우 : 이탈률 123% 증가
이렇게 FCP가 매우 늦어진다는 치명적인 단점임.
Client Side Rendering(CSR)
→ React.js 앱의 기본적인 렌더링 방식으로, 클라이언트(브라우저)에서 직접 화면을 렌더링 하는 방식
: 페이지 이동이 매우 빠르고 쾌적하다는 장점이 있음. / 단점 : 초기 접속 속도가 느리다 (FCP : First Contentful Paint)
그렇다면, Next.js는?
Next.js의 사전 렌더링
하지만, 이 단계에서는 interaction은 아직 동작하지 않음.
수화(기존의 HTML코드에 Javascript와 연결)가 완료되면 상호작용 가능한 웹사이트가 된다
즉, Next.js는 사전렌더링 방식을 통해 React App의 단점을 해소하여 빠른 FCP를 달성함과 동시에 React App의 장점을 승계하여 빠른 페이지 이동의 장점을 모두 가지고 있다.
