[Weekly Paper] Next.js 사용 이유

1️⃣ 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.

우선 Next.js는 React.js를 기반으로 한 웹 개발 프레임워크로, React.js를 보다 강력하고 편리하게 사용할 수 있도록 다양한 기능을 제공합니다. React의 확장판으로 이해할 수 있으며, Vercel에서 개발하여 오픈소스로 운영되고 있습니다.

---

Next.js의 주요 특징

1. 페이지 라우팅

• Next.js는 파일 기반 라우팅 시스템을 제공합니다.
• Pages 디랙토리 안의 파일들이 URL 경로로 자동 매핑됩니다.

2. 빌트인 최적화 기능

• 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 기본적으로 지원합니다.
• 코드 스플리팅, 이미지 최적화, Lazy Loading 등 웹 성능을 극대화하기 위한 기능이 내장되어 있습니다.

3. 다이나믹 HTML 스트리밍

• 데이터 변화에 따라 동적으로 HTML을 스트리밍하여 빠른 초기 로딩 속도를 제공합니다.
• Increamental Static Regeneration(ISR)을 통해 정적 페이지를 실시간으로 업데이트 할 수 있습니다.

---

Next.js의 장점

1. SEO 최적화

서버 사이드 렌더링과 정적 페이지 생성으로 검색 엔진에 친화적입니다.

 

2. 생산성 향상

기본 제공되는 기능들로 인해 개발 속도가 빠릅니다.

 

3. 유연성

CSR, SSR, SSG, ISR 등 다양한 렌더링 방식을 지원합니다.

---

2️⃣ Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요.

 

SSR 실행 과정

1. 요청(Request)

사용자가 특정 URL에 접속하면 브라우저가 서버로 요청을 보냅니다.

 

2. 서버에서 HTML 생성

서버는 필요한 데이터를 조회하고, React 컴포넌트를 렌더링하여 완전한 HTML을 생성합니다.

 

3. HTML 전달

브라우저는 서버로부터 완전한 HTML을 받아 화면에 표시합니다.

---

Hydration이란?

Hydration은 서버에서 렌더링된 HTML을 클라이언트에서 React로 다시 활성화하는 과정입니다. 이 단계에서 React는 서버가 제공한 HTML을 가져와 클라이언트 쪽에서 이벤트 핸들러와 상태 관리 등을 추가합니다.

 

Hydration 과정

1. 서버에서 받은 HTML 렌더링

브라우저는 SSR로 전달된 HTML을 사용자 화면에 표시합니다.

 

2. React 활성화

클라이언트는 서버에서 전달받은 HTML을 기반으로 React 컴포넌트를 초기화하고, React DOM 트리를 탐색하며, 서버에서 렌더링된 HTML과 React의 Virtual DOM을 비교하여 동일하게 만듭니다.

 

3. 이벤트 핸들러 연결

React는 컴포넌트에 정의된 이벤트 핸들러를 바인딩합니다.

---

SSR과 Hydration의 주요 차이점

항목	SSR	Hydration
동작 시점	서버에서 HTML을 생성하는 단계	클라이언트에서 React를 활성화하는 단계
목적	사용자에게 초기 콘텐츠 제공	클라이언트에서 동적 기능 활성화
핵심 기술	서버에서 React 렌더링, HTML 생성	React Virual DOM과 이벤트 핸들러 초기화