리액트와 Next.js는 모두 JavaScript 기반의 프론트엔드 프레임워크이지만, Next.js는 리액트의 기능을 확장하여 더 많은 기능을 제공
Next.js 사용 이유:
프리 렌더링(SSR) 지원: Next.js는 프리렌더링을 지원하여 서버에서 초기 HTML을 생성해 클라이언트에 전달합니다. 이로 인해 페이지의 초기 로딩 시간을 줄이고 검색 엔진 최적화(SEO)를 개선할 수 있음.
라우팅 및 코드 분할: 내장된 라우팅 시스템을 통해 페이지 간의 이동이 쉽고 빠릅니다. 또한, 코드 분할을 자동으로 처리하여 필요한 컴포넌트만 로드하여 초기 로딩 시간을 최소화합
API 라우팅: API endpoints를 쉽게 설정하여 서버리스 함수를 만들고 호출할 수 있음
Static Site Generation(SSG): 정적 사이트 생성을 지원하여 사전에 페이지를 미리 렌더링하고 배포할 수 있습니다.
Next.js의 SSR과 Hydration:
서버 사이드 렌더링(SSR): 클라이언트 요청에 대해 서버에서 HTML을 생성하는 과정. Next.js의 getServerSideProps를 사용하여 페이지가 요청될 때마다 필요한 데이터를 가져와 HTML을 생성.
Hydration: 서버에서 전달된 HTML과 클라이언트 측의 JavaScript 코드를 연결하는 과정. 브라우저는 서버에서 전달받은 HTML을 렌더링하고, 그에 따라 클라이언트 측의 JavaScript 코드가 해당 HTML을 가져와 추가적인 상호작용 및 이벤트 처리를 할 수 있음. 이 과정을 통해 클라이언트 측 렌더링이 이루어지며, 이를 Hydration이라고 함. Hydration을 통해 SPA와 SSR의 이점을 동시에 얻을 수 있음
