Next.js SSR
-
Next.js 는 CSR 방식인 React 를 SSR 방식으로 구현할 수 있도록 해주는 프레임워크입니다.
-
-
Next.js 는 모든 페이지를 미리 렌더링합니다. (Pre-rendering)
-
각 페이지의 HTML 을 미리 생성한다는 의미입니다.
-
이 때 생성된 HTML 은 해당 페이지에 필요한 최소한의 자바스크립트 코드와 연결되며, 연결되는 것을 Hydration 이라고 합니다.
-
이후 브라우저에 의해 페이지가 로드되면, 자바스크립트 코드가 실행되어 페이지와 유저가 상호작용할 수 있게 됩니다.
-
Next.js 에서 프리 렌더링 방식은 2 가지이며, HTML 생성 시점의 차이가 있습니다.
- SSG (Static Site Generation)
- 빌드 타임에 HTML 이 생성됩니다.
- 매 요청 마다 이를 재사용합니다.
- 빌드 시점 이후에는 서버에게 따로 요청하지 않습니다.
- 데이터가 자주 바뀌지 않는 블로그나 상품 정보 페이지 등에서 사용됩니다.
- SSR (Server Side Rendering)
- 매 요청 마다 HTML 을 생성합니다.
- 여기서 요청은 웹 사이트의 페이지에 접속하거나 페이지를 새로고침할 때마다 발생하는 요청을 말합니다.
- SSR 방식에서는 클라이언트의 각 요청 마다 서버가 해당 페이지의 데이터 및 리소스를 가져와 HTML 을 동적으로 생성합니다.
- 내용이 자주 업데이트되어야 할 때 주로 사용합니다.
Next.js 의 SSR 실행 과정
- 사용자 요청
- 사용자가 브라우저에 특정 페이지에 대한 요청을 하면, 요청은 Next.js 서버로 전송됩니다.
- 서버 처리
- Next.js 서버는 요청을 받고, 해당 페이지에 대한 React 컴포넌트를 렌더링합니다.
- 이 과정에서 필요한 데이터를 가져오기 위해 getServerSideProps 같은 데이터 페칭 메서드가 호출될 수 있습니다.
- HTML 생성
- 서버는 React 컴포넌트와 데이터를 사요해서 HTML 문서를 생성합니다.
- 이 HTML 은 초기 상태를 포함하고 클라이언트 측 자바스크립트를 실행할 준비가 되어있는 상태입니다.
- 클라이언트에 응답 전송
- 생성된 HTML 문서를 사용자의 브라우저로 전송합니다.
- 사용자는 서버에서 렌더링된 페이지를 볼 수 있습니다.
- 브라우저에서 자바스크립트 실행
- 사용자의 브라우저에서 자바스크립트가 실행되며 페이지가 완전히 상호작용이 가능한 상태가 됩니다.
- 이 때를 hydration 된 상태라고 볼 수 있습니다.
- 이 단계에서는 클라이언트 측 자바스크립트가 서버에서 렌더링된 마크업을 상호작용 가능하도록 만들고, 이벤트 핸들러나 추가적인 클라이언트 측 로직을 연결합니다.
- 페이지 상호작용
- 사용자는 페이지와 상호작용할 수 있습니다.
- 페이지 내 다른 링크나 동적 기능을 사용할 수 있습니다.
- 추가 페이지 요청은 Next.js 의 클라이언트 사이드 라우팅을 통해 처리될 수 있으며, 이 경우 서버로의 요청 없이 클라이언트 측에서 라우팅이 처리됩니다.
결론
Next.js SSR
- Next.js 에서의 SSR 은 서버에서 미리 HTML 을 렌더링하여 클라이언트에 전달하는 과정입니다.
- 이는 초기 로딩 속도를 빠르게 하고 SEO 를 개선합니다.
Hydration(수화)
- 클라이언트가 서버에서 받은 HTML 을 화면에 표시한 후 React 의 자바스크립트 코드를 실행하여 해당 HTML 을 상호작용 가능한 상태로 전환하는 과정입니다.
- 이 두 과정은 함께 동작하여 빠른 초기 렌더링과 부드러운 사용자 경험을 제공하며 검색 엔진 최적화에도 중요한 역할을 합니다.
