어플리케이션 렌더링
- 애플리케이션의 렌더링은 데이터를 화면에 시각적으로 보여주는 과정을 말합니다.
- 즉, 웹 페이지나 애플리케이션의 UI(사용자 인터페이스)를 사용자가 볼 수 있도록 화면에 그리는 작업입니다.
CSR (Client-Side Rendering)
- 클라이언트(브라우저) 에서 페이지를 렌더링하는 방식입니다.
- 서버는 보통 빈 HTML 페이지 와 JavaScript 코드를 클라이언트로 보내고, 클라이언트가 해당 JavaScript를 실행해 화면을 구성합니다.
- React, Vue와 같은 프레임워크가 주로 사용하는 방식입니다.
장점:
- 서버 부하가 적음: 서버에서 페이지를 렌더링할 필요가 없으므로 서버의 부담이 적습니다.
- 복잡한 UI 상호작용에 적합: 클라이언트 측에서 모든 렌더링을 처리하므로, 복잡한 사용자 인터페이스에 적합합니다.
단점:
- 초기 로딩 속도 느림: 초기 화면을 렌더링하기 전에 JavaScript 파일이 모두 로드되고 실행되어야 하므로, 첫 페이지 로드가 느릴 수 있습니다.
- SEO 불리: 클라이언트에서 렌더링이 완료되기 전까지는 빈 HTML만 존재하기 때문에, 검색 엔진이 콘텐츠를 제대로 인덱싱하지 못할 수 있습니다.
SSR (Server-Side Rendering)
- 서버에서 페이지를 렌더링한 후 완성된 HTML을 클라이언트(브라우저)에게 전달하는 방식입니다.
- Next.js가 대표적인 SSR 프레임워크입니다.
동작 방식:
- 사용자가 페이지 요청을 하면 서버에서 해당 페이지를 렌더링합니다.
- 서버는 완성된 HTML을 클라이언트로 보내줍니다.
- 이후, React와 같은 클라이언트 로직이 로드되면 Hydration(HTML과 React 상태를 결합) 과정을 통해 React가 페이지를 제어합니다.
장점:
- SEO에 유리: 서버에서 완성된 HTML을 전달하므로, 검색 엔진이 페이지 콘텐츠를 쉽게 읽을 수 있습니다.
- 빠른 초기 로드: 클라이언트는 HTML을 받아 즉시 화면에 표시하므로, 첫 화면 로드가 빠릅니다.
단점:
- 서버 부하 증가: 서버에서 매번 페이지를 렌더링해야 하므로, 트래픽이 많을 경우 서버에 부하가 걸릴 수 있습니다.
- 느린 상호작용 초기화: 초기 화면은 빠르게 뜨지만, React가 로드되고 인터랙티브 상태가 되기까지 시간이 걸릴 수 있습니다.
Hydration
- Hydration은 SSR에서 중요한 과정으로, 빠른 초기 로딩을 가능하게 합니다.
- 서버가 미리 생성한 HTML을 클라이언트에서 React와 같은 라이브러리가 동적으로 작동할 수 있도록 만드는 단계입니다.
하이드레이션 과정
1. 클라이언트에서 HTML 표시:
- 사용자가 웹사이트를 요청하면, 서버가 React 컴포넌트를 사용하여 HTML을 생성합니다.
- 이 HTML은 클라이언트에 전송되어 즉시 브라우저에 표시합니다.
- 이로 인해 사용자는 빠르게 페이지를 볼 수 있습니다.
2. React 활성화:
- 클라이언트에서 React가 로드되면, ReactDOM.hydrate 메서드를 사용하여 기존의 HTML과 React의 가상 DOM을 비교합니다.
- React는 이 HTML이 자신의 html임을 인식합니다.
- 사용자가 버튼을 클릭하거나 입력을 할 때, React는 상태를 업데이트하고 필요한 부분만(use client) 재렌더링합니다.
개발합시다