SSR VS NEXT.JS
SSR 방식에서는 서버에서 앱을 렌더링한 후, 클라이언트에서 해당 앱을 "마운트(mount)"하는 방식으로 작동합니다. 여기서 "마운트"란, 앱을 브라우저의 DOM에 삽입하는 것을 의미합니다. 이 과정에서 브라우저는 서버에서 전달된 HTML과 JavaScript 코드를 기반으로 앱을 마운트하게 됩니다.
반면, Next.js에서는 미리 렌더링한 정적인 HTML 파일을 클라이언트에 "전달(deliver)"하는 방식으로 작동합니다. 이러한 방식은 서버에서 앱을 렌더링하지 않기 때문에, 클라이언트에서 앱을 마운트하는 과정이 필요하지 않습니다. 즉, 브라우저는 전달받은 HTML 파일을 렌더링하고, 이후에 JavaScript 코드를 실행시켜 앱을 초기화하게 됩니다.
Next.js는 코드 스플리팅과 같은 최신 웹 개발 기술을 자동으로 적용해주며, 라우팅과 관련된 코드를 단순화할 수 있습니다. 이러한 기능은 개발자가 코드를 작성할 때 생산성과 편의성을 향상시킵니다.
하이드레이션
"하이드레이션(Hydration)"이란 용어는, 클라이언트 측에서 정적인 HTML 파일을 받아와 이를 동적인 React 앱으로 변환하는 과정을 의미합니다. 이 과정은 SPA(Single Page Application)와 SSR(Server-Side Rendering) 모두에서 필요합니다.
Next.js의 경우, 클라이언트 측에서 정적인 HTML 파일을 받아와 이를 React 앱으로 변환하는 과정을 "하이드레이션"이라는 용어로 표현합니다. 이 과정은 클라이언트 측에서 이루어지기 때문에, Next.js는 SPA와 SSR 모두에서 "하이드레이션"을 지원할 수 있습니다.
따라서,React 앱을 동적으로 렌더링하는 과정에서 필요한 공통적인 개념입니다. 그리고 이 과정을 Next.js에서는 더욱 편리하고 쉽게 사용할 수 있도록 지원하고 있습니다.
앱의 초기화란?
앱을 초기화 시킨다는 것은, React 앱을 실행하기 위해 필요한 초기화 작업을 수행하는 것을 의미합니다. 이 과정에서, Next.js는 브라우저에서 실행되는 JavaScript 코드를 제공하고, 이 코드는 React 앱을 초기화하고, 데이터를 로드하고, 브라우저의 DOM에 렌더링하는 등의 작업을 수행합니다.
Next.js에서는 페이지 이동 시 새로운 HTML 파일을 서버에서 렌더링하지 않고, 이전에 미리 생성된 정적 HTML 파일을 브라우저에 전달하여 페이지를 렌더링합니다. 이 과정에서, React 앱은 클라이언트 측에서 초기화되고 마운트됩니다. 이때 앱의 초기화 작업에 필요한 데이터가 변경되었다면, 클라이언트 측에서 다시 데이터를 로드하고 앱을 업데이트하게 됩니다. 이를 통해, 초기 페이지 로딩 시에는 정적인 HTML 파일을 제공하여 빠른 로딩 속도를 보장하면서, 페이지 이동 시에는 서버와의 통신 없이 클라이언트 측에서 앱을 업데이트할 수 있습니다.
