리액트는 JavaScript를 사용하는 프론트엔드 라이브러리로, 대부분의 렌더링 로직을 브라우저에서 처리하여 동적 웹앱을 구축하는 데에 적합합니다. 반면, 서버 사이드 렌더링 (SSR)은 서버에서 웹 페이지의 HTML을 생성하는 방식으로, 초기 페이지 로딩 시 성능을 향상시키고 SEO에 유리합니다.

SSR의 동작 방식

서버 사이드 렌더링은 일반적으로 다음과 같은 프로세스를 따릅니다:

1. 요청 수신: 클라이언트로부터 웹 페이지 요청을 받습니다.
2. 데이터 가져오기: 필요한 데이터를 서버에서 가져옵니다.
3. 렌더링: 데이터와 함께 웹 페이지를 렌더링하여 HTML 문서를 생성합니다.
4. 응답: 생성된 HTML을 클라이언트에게 전달합니다.

리액트와 SSR

리액트는 기본적으로 클라이언트 사이드 렌더링 (CSR)을 지향합니다. 그러나 SSR을 통해 서버에서 HTML을 생성할 수 있습니다. 이를 통해 초기 로딩 시 성능 향상과 SEO 최적화를 달성할 수 있습니다.

리액트에서 SSR을 구현하는 가장 일반적인 방법은 “서버 사이드 렌더링”과 “리액트 hydrate”를 결합하는 것입니다. 서버 사이드 렌더링은 초기 HTML을 생성하고, 클라이언트로 전송된 HTML을 리액트 hydrate와 함께 재사용하여 클라이언트 측에서 이벤트 처리 및 상태 관리를 이어받을 수 있습니다.

이를 통해, 리액트의 장점과 SSR의 이점을 모두 활용할 수 있습니다.

서버 사이드 렌더링과 리액트의 결합을 통해, 성능과 사용성을 동시에 향상시킬 수 있습니다.

References:

• 리액트 공식 문서
• 서버 사이드 렌더링에 관한 자세한 내용