Next.js란?

React.js 전용의 웹 개발 "Framework"

Framework

• 주도권을 Framework가 가짐
  프레임워크가 제공하는 기능을 이용하거나 허용하는 범위 내에서만 추가 도구 사용 가능
• 예시:
  페이지 라우팅 기능을 구현해야 한다면 Next.js가 제공하는 페이지 라우터나 앱 라우터를 이용해만 한다.

사전 렌더링 이해하기

사전 렌더링이란?

• 브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식
• 초기 접속 속도(FCP*)가 빠름
  *FCP(First Contentful Paint): "요청 시작" 시점으로부터 컨텐츠가 화면에 처음 나타는데 걸리는 시간으로 FCP가 길수록 이탈률이 높아짐

사전 렌더링 방식

1. 유저가 접속 요청
2. 서버에서 JS 실행(렌더링*)
3. 렌더링된 HTML을 클라이언트(브라우저)로 보냄
4. 화면에 렌더링**(유저에게 화면 보임) but 인터렉션(상호작용) 불가
5. 서버가 JS Bundle(접근 가능한 모든 컴포넌트 코드 존재)을 이어서 보냄
6. 클라이언트에서 JS 실행(HTML과 연결)
7. 인터렉션(상호작용) 가능(TTI***)
8. 페이지 이동 요청은 CSR 방식으로 처리(JS Bundle을 보내기 때문에)

*JS 실행(렌더링): 자바스크립트 코드(React 컴포넌트)를 HTML로 변환하는 과정
**화면에 렌더링: HTML 코드를 브라우저가 화면에 그려내는 작업
***TTI(Time To Interact): "요청 시작" 시점으로부터 인터렉션(상호작용) 가능한 페이지가 될 때까지 걸린 시간

수화(Hydration)란?

• 수화(Hydration): 클라이언트에서 JS 실행(HTML과 연결) ➡️ 인터렉션(상호작용) 가능

기존 리액트의 클라이언트 사이드 렌더링(CSR)이란?

• 클라이언트(브라우저)에서 직접 화면을 렌더링 하는 방식
• 초기 접속 이후 페이지 이동이 매우 빠르고 쾌적
• JS Bundle에 접근 가능한 모든 컴포넌트 코드가 존재해서 서버에 요청할 필요 없이 다른 페이지 렌더링 가능

클라이언트 사이드 렌더링 방식

1. 유저가 접속 요청
2. 서버가 index.html(빈껍데기)을 클라이언트(브라우저)로 보냄
3. 빈 화면 렌더링(유저에게 화면 보이지 않음)
4. 서버가 JS Bundle(접근 가능한 모든 컴포넌트 코드 존재)을 이어서 보냄
5. 클라이언트에서 JS 실행
6. 컨텐츠 렌더링(유저에게 화면 보임)

출처: 한 입 크기로 잘라먹는 Next.js(v15)