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

간편한 설치 및 구성:
React는 사용자 인터페이스를 구축하기 위한 라이브러리이지만 프로젝트의 특정 구조를 규정하지는 않습니다.
Next.js는 기본 프로젝트 구조 및 구성과 함께 제공되는 React를 기반으로 구축된 프레임워크로, 애플리케이션을 더 쉽게 설정하고 빠르게 구축할 수 있도록 해줍니다.

서버측 렌더링(SSR):
React는 주로 클라이언트측 렌더링에 중점을 둡니다. 즉, 웹페이지의 초기 렌더링이 브라우저에서 발생한다는 의미입니다.
Next.js는 서버 측 렌더링을 지원하므로 페이지의 일부가 클라이언트에 도달하기 전에 서버에서 렌더링될 수 있습니다. 이를 통해 성능과 SEO가 향상될 수 있습니다.

자동 코드 분할:
Next.js는 자동 코드 분할 기능을 제공합니다. 즉, JavaScript 번들을 필요에 따라 로드되는 더 작은 덩어리로 나눌 수 있습니다. 사용자는 자신이 보고 있는 특정 페이지에 필요한 코드만 다운로드하므로 페이지 로드 속도가 빨라집니다.

라우팅:
React에는 내장된 라우팅이 없습니다. 개발자는 이러한 목적으로 추가 라이브러리를 사용하는 경우가 많습니다.
Next.js에는 파일 기반 라우팅 시스템이 포함되어 있어 추가 라우팅 구성 없이 직관적이고 쉽게 경로를 관리할 수 있습니다.

정적 사이트 생성(SSG):
Next.js는 빌드 시 콘텐츠가 사전 렌더링되는 정적 사이트 생성을 지원합니다. HTML이 미리 생성되어 CDN(Content Delivery Network)에서 직접 제공될 수 있으므로 로딩 시간이 매우 빨라질 수 있습니다.

API 경로:
Next.js를 사용하면 API 경로를 쉽게 생성할 수 있으므로 프런트엔드 프로젝트 내에서 서버리스 기능과 백엔드 기능을 원활하게 구축할 수 있습니다.

요약

React는 사용자 인터페이스 구축을 위한 강력한 라이브러리인 반면, Next.js는 React를 사용하여 본격적인 고성능 웹 애플리케이션을 더 쉽게 구축할 수 있도록 유용한 기능과 규칙을 추가합니다. 일반적인 작업을 단순화하고 구조화된 프로젝트 설정을 제공하며 서버 측 렌더링 및 자동 코드 분할과 같은 추가 기능을 제공합니다.

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

Next.js의 서버측 렌더링(SSR):
최초 요청:
사용자가 Next.js 앱의 페이지에 대한 첫 번째 요청을 하면 서버는 해당 서버 측 코드를 실행하여 해당 페이지에 대한 HTML을 생성합니다.

서버측 렌더링(SSR):
서버는 서버에서 React 구성 요소 코드를 실행하여 필요한 데이터를 가져옵니다.
그런 다음 데이터가 포함된 HTML 콘텐츠를 생성하고 전체 HTML 페이지를 클라이언트에 보냅니다.

클라이언트가 HTML을 수신합니다:
클라이언트는 서버로부터 완전히 렌더링된 HTML 페이지를 받습니다. 여기에는 서버에서 생성된 정적 콘텐츠와 동적 콘텐츠가 모두 포함됩니다.

수분 공급:
HTML과 함께 서버는 React 코드가 포함된 JavaScript 번들의 최소화된 버전도 보냅니다.
클라이언트측 JavaScript 번들이 도착하면 이를 대신하고 React는 정적 HTML을 다시 수화하여 이벤트 리스너를 연결하고 페이지를 완전히 대화형으로 만듭니다.

수분 공급:
자바스크립트가 대신함:
초기 HTML이 로드된 후 JavaScript 번들이 클라이언트 측에서 실행됩니다.
React는 서버에서 렌더링된 HTML과 클라이언트에서 렌더링된 HTML을 비교하고 차이점을 식별합니다.

재수화 과정:
React는 페이지의 기존 HTML 요소에 이벤트 리스너 및 기타 클라이언트 측 기능을 연결합니다.
모든 대화형 기능, 상태 관리 또는 클라이언트 측 라우팅은 이제 리하이드레이션된 React 구성 요소에 의해 처리됩니다.

후속 탐색을 위한 클라이언트측 렌더링(CSR):
초기 SSR 및 복원이 완료되면 앱 내 후속 탐색에서 클라이언트 측 렌더링(CSR)을 활용할 수 있습니다.
필요한 데이터와 구성 요소만 필요에 따라 서버에서 가져오므로 전송되는 데이터의 양이 줄어들고 사용자 경험이 향상됩니다.

요약

Next.js의 SSR에는 서버가 페이지의 초기 HTML을 생성하고 이를 클라이언트에 보낸 다음 클라이언트 측 JavaScript로 페이지를 다시 생성하는 작업이 포함됩니다. 이 프로세스는 서버 측 렌더링과 클라이언트 측 상호 작용의 이점을 모두 제공하므로 초기 페이지 로드 속도가 빨라지고 사용자 경험이 원활해집니다.

👍🏻 Reference

chatGPT