Next.js를 배우고 있다. JavaScript, React 기반의 프레임워크인 Next.js는 뭐가 다르기에 많이 사용하는 것인가?
❓ React만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.
🤚
- React와 Next.js는 둘 다 UI를 개발하는 데 사용되지만,
Next.js는 React 기반의 프레임워크로 서로 다른 목적과 기능을 제공한다. - Next.js를 사용하는 이유는 React 단독으로 작업할 때 발생하는 단점들을 보완하고, 더 빠르고 효율적인 웹 애플리케이션 개발을 가능하게 한다.
- SSR/SSG 지원을 통해 SEO 최적화와 빠른 초기 렌더링을 할 수 있다.
- SSR(Server-Side Rendering): 웹 애플리케이션에서 페이지를 서버 측에서 렌더링하여 클라이언트에게 HTML로 전송하는 방식이다.
- SSG(Static Site Generation): 정적 사이트 생성을 의미한다. 이는 웹 페이지를 빌드 시점에 미리 HTML 파일로 생성하여 서버에 배포하는 방식이다. 빌드 시 데이터가 HTML에 포함되며, 클라이언트가 페이지를 요청할 때 서버는 미리 생성된 HTML을 그대로 전달한다.
- 단순하고 직관적인 라우팅 시스템인 파일 기반 라우팅을 통해 구조적으로 간편하다.
- 최근 버전에는 App Router 방식을 지원하는 업데이트가 나왔었다. 기존의 Pages Routing 방식과 차이는 있다.
- API 라우팅으로 간단한 데이터 처리가 가능하여 별도의 서버가 필요없다.
- TypeScript를 기본적으로 지원하며 설정도 자동화 되어있다. 이로인한 타입 안정성 확보할 수 있다.
- Vercel과 같은 플랫폼을 통한 배포를 간소화할 수 있다.
❓ Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요.
🤚
1. SSR (Server-Side Rendering) 실행하는 과정
- SSR은 사용자가 브라우저에서 페이지를 요청할 때, 서버에서 HTML을 렌더링한 후, 클라이언트에 전달하는 방식이다.
- 다음과 같은 과정을 거칩니다.
1) 사용자의 요청(Request) 발생:
- 사용자가 URL에 접속하면 서버로 요청이 전달된다.
2)서버에서 데이터 처리:
- Next.js 서버는 요청된 페이지의 컴포넌트를 실행한다.
- getServerSideProps를 통해 데이터를 가져오고, React 컴포넌트가 서버에서 실행되어 HTML을 생성한다.
3) HTML 전달:
- 생성된 HTML이 브라우저로 전달된다.
- 이 HTML은 이미 서버에서 콘텐츠와 데이터를 포함하고 있으므로 사용자는 빠르게 초기 화면을 확인할 수 있다.
4) JS 번들 전달:
- 서버에서 생성된 HTML과 함께 JavaScript 번들도 브라우저로 전달된다. 이 번들은 클라이언트 측에서 React의 동적 동작을 가능하게한다.
--> 이 과정에서 hydration 이라는 개념을 살펴볼 수 있다.
- Hydration
- Hydration은 서버에서 렌더링된 정적 HTML 페이지에 React와 같은 JavaScript 라이브러리를 연결하여 상호작용이 가능한 SPA(Single Page Application)로 전환하는 과정을 의미한다.
- Hydratin 은 수분 공급이라는 의미로 JS 코드들이 DOM 요소 위에 물을 채우듯 필요로 하던 요소들을 채운다고 해서 붙여진 이름이라고 한다.
- Hydration 과정:
1) HTML 렌더링:
- 서버에서 전달된 HTML이 브라우저에서 렌더링된다.
- 이 시점에서는 동적인 동작 없이 정적 HTML만 표시된다.
2) React 활성화(hydration):
- 서버에서 전달된 JavaScript 번들이 비동기로 로드되면, React는 서버에서 생성된 HTML을 기반으로 DOM 요소와 React 컴포넌트를 연결한다.
- 이를 통해 React의 상태 관리 및 이벤트 핸들링 기능이 활성화된다.
- 이 과정에 정적 웹 페이지에 물을 주는 과정이다. - Hydration의 중요성:
- Hydration이 완료되면 클라이언트에서 React의 동적 인터랙션이 가능해진다.
예: 클릭 이벤트 처리, 상태 업데이트 등.
중고