Next.js에서 SSR은 어떻게 실행될까?

Next.js에서 서버 사이드 렌더링(SSR) 실행 과정과 하이드레이션(hydration)은 웹 애플리케이션의 성능과 사용자 경험을 향상시키는 기능을 합니다.

먼저 하이드레이션이란?

하이드레이션은 서버에서 미리 생성된 정적인 HTML에 클라이언트 측 JavaScript를 결합하여 사용자에게 초기 로딩 속도는 빠르면서도 완벽한 상호 작용이 가능한 동적인 웹 페이지를 제공하는 과정입니다.

Next.js SSR 실행 과정:

1. 사용자 요청:
   • 사용자가 브라우저를 통해 특정 페이지를 요청하면, 이 요청은 Next.js 서버로 전송됩니다.
2. 서버 처리:
   • Next.js 서버는 요청을 받고, 해당 페이지에 대한 React 컴포넌트를 렌더링합니다.
   • 이 과정에서 getServerSideProps와 같은 데이터 페칭 메서드를 호출하여 필요한 데이터를 가져올 수 있습니다.
3. HTML 생성:
   • 서버는 React 컴포넌트와 데이터를 사용하여 초기 HTML 문서를 생성합니다.
   • 이 HTML은 초기 상태를 포함하며, 클라이언트 측 JavaScript를 실행할 준비가 된 상태입니다.
4. 클라이언트에 응답 전송:
   • 생성된 HTML 문서를 사용자의 브라우저로 전송합니다.
   • 사용자는 서버에서 렌더링된 페이지를 즉시 볼 수 있습니다.
5. 브라우저에서 JavaScript 실행(하이드레이션):
   • 브라우저에서 JavaScript가 실행되며, 페이지가 완전히 상호 작용 가능한 상태가 됩니다.
   • 클라이언트 측 JavaScript는 서버에서 렌더링된 마크업에 이벤트 핸들러 및 추가적인 클라이언트 측 로직을 연결합니다.
6. 페이지 상호 작용:
   • 사용자는 페이지와 상호 작용할 수 있습니다.
   • 추가 페이지 요청은 Next.js의 클라이언트 사이드 라우팅을 통해 처리될 수 있으며, 이 경우 서버로의 요청 없이 클라이언트 측에서 라우팅이 처리됩니다.

요약:

• Next.js의 SSR은 서버에서 초기 HTML을 생성하여 클라이언트에 빠르게 전달함으로써 SEO와 초기 로딩 속도를 향상시킵니다.
• 하이드레이션은 서버에서 생성된 HTML에 클라이언트 측 JavaScript를 결합하여 동적인 웹 페이지로 만드는 과정이며, 사용자 경험을 향상시키는 데 중요한 역할을 합니다.