서버 사이드 렌더링(SSR)은 웹 애플리케이션에서 클라이언트 측에서만 렌더링되던 부분을 서버에서도 렌더링하여 완전한 HTML 문서를 클라이언트에게 제공하는 기술입니다. 즉, 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 기술입니다. 이번 포스팅에서는 SSR의 작동 방식과 장점, 구현 방법에 대해서 간략하게 알아보겠습니다.
SSR은 클라이언트와 서버 간의 협력으로 이루어지는 프로세스입니다. 서버에서는 초기 렌더링을 처리하고 클라이언트에게 완성된 HTML을 제공함으로써 초기 로딩 속도를 개선할 수 있습니다. 이후에는 클라이언트 측 JavaScript 코드가 실행되어 동적인 상호작용을 제공합니다.
동작 과정
클라이언트 요청
- 사용자가 웹 애플리케이션에 접속하면 클라이언트는 서버에 요청을 전송합니다.
서버에서 데이터 로드
- 서버는 해당 요청에 필요한 데이터를 로드합니다. 데이터는 API 호출, 데이터베이스 쿼리 등을 통해 가져올 수 있습니다.
컴포넌트 렌더링
- 서버는 로드한 데이터와 함께 React 컴포넌트를 렌더링합니다. 이때, 컴포넌트는 사용자에게 보여질 최종 HTML을 생성하는데 사용됩니다.
완성된 HTML 반환
- 서버는 완성된 HTML을 클라이언트에게 반환합니다. 이 HTML에는 컴포넌트가 렌더링된 상태와 필요한 데이터가 포함됩니다.
클라이언트 렌더링
- 클라이언트는 받은 HTML을 브라우저에 렌더링합니다. 이후에는 클라이언트 측 JavaScript 코드가 실행되어 해당 페이지의 상호작용이 가능해집니다.
페이지가 로드된 이후에는 사용자의 상호작용에 따라 클라이언트 측에서 추가적인 데이터 요청이 발생하고, 필요한 부분만 업데이트됩니다. 이는 일반적인 클라이언트 사이드 렌더링(CSR)과 유사합니다.
SSR의 장점
서버 사이드 렌더링(SSR)의 장점은 다양한 측면에서 애플리케이션의 성능과 사용자 경험을 향상시킬 수 있습니다.
1. 초기 로딩 속도 개선
SSR은 서버에서 렌더링된 완전한 HTML 문서를 클라이언트에게 제공하므로, 사용자는 초기에 전체 페이지를 볼 수 있습니다. 이는 CSR(Client-Side Rendering)과 비교했을 때 초기 로딩 속도가 빠르다는 장점을 가지고 있습니다. 사용자들은 빠른 페이지 로딩을 경험하며, 애플리케이션에 대한 전반적인 성능이 향상됩니다.
2. 검색 엔진 최적화(SEO)
SSR은 서버에서 완전한 HTML 문서를 제공하기 때문에 검색 엔진 크롤러가 콘텐츠를 인덱싱하는 데 용이합니다. 검색 엔진은 CSR에서는 자바스크립트 파일의 로딩을 기다리지 않고 HTML을 크롤링합니다. 따라서 SSR을 사용하면 검색 엔진이 애플리케이션의 콘텐츠를 쉽게 찾고 인덱싱할 수 있습니다. 이로써 검색 결과에 노출되는 가능성이 높아지며, 애플리케이션의 가시성과 유입 경로가 향상됩니다.
3. 소셜 미리보기
소셜 미디어 플랫폼은 URL을 스크랩하여 해당 페이지의 미리보기를 생성합니다. SSR을 사용하면 서버에서 렌더링된 HTML 문서를 제공하므로, 미리보기가 정확하고 풍부한 정보를 포함할 수 있습니다. 이는 사용자가 앱을 공유할 때 미리보기가 정확히 표시되어 사용자들에게 더욱 매력적인 링크를 제공할 수 있습니다.
4. 보안 강화
SSR은 클라이언트 측 자바스크립트 코드를 외부로 노출시키지 않기 때문에 애플리케이션의 보안을 강화하는 데 도움을 줍니다. CSR에서는 클라이언트에게 자바스크립트 파일을 제공하여 실행되기 때문에 악의적인 사용자가 코드를 분석하거나 수정할 수 있는 위험이 존재합니다. SSR은 클라이언트 측에서 실행되는 코드 양을 최소화하여 보안 취약점을 줄여줍니다.
5. 개발 유연성
SSR은 서버 측에서 렌더링되기 때문에 서버 측의 다양한 기능과 환경을 활용할 수 있습니다. 서버 사이드의 언어나 프레임워크, 미들웨어 등 다양한 기술을 자유롭게 사용하여 애플리케이션을 개발할 수 있습니다. 또한, SSR은 클라이언트와 독립적으로 구현되므로 클라이언트 측 기술 변화에 영향을 받지 않고 개발을 진행할 수 있는 장점도 있습니다.
SSR의 단점
서버 부하
SSR은 서버에서 렌더링을 처리하기 때문에 서버의 부하가 증가할 수 있습니다. 많은 요청이 동시에 발생하거나 복잡한 컴포넌트를 렌더링해야 하는 경우 서버의 응답 시간이 증가할 수 있습니다. 적절한 서버 인프라와 캐싱 전략을 사용하여 서버 부하를 완화할 수 있습니다.
초기 구성 복잡성
SSR은 클라이언트와 서버 간의 상호작용이 필요하기 때문에 초기 구성이 상대적으로 복잡할 수 있습니다. 서버 측 라우팅, 데이터 로딩 및 상태 관리 등을 처리해야 하므로 개발자가 더 많은 작업과 공부를 해야 합니다. 이에 대한 복잡성을 줄이기 위해 프레임워크나 라이브러리를 사용하는 것이 도움이 될 수 있습니다.
클라이언트 자원 사용
SSR은 초기 로딩 시에 완전한 HTML 문서를 클라이언트에게 전송합니다. 따라서 초기 로딩에 필요한 자원(HTML, CSS, JavaScript)의 크기가 증가할 수 있습니다. 이는 네트워크 대역폭을 차지하고 초기 로딩 시간을 늘릴 수 있으며, 모바일 사용자들에게는 추가적인 데이터 사용량을 초래할 수도 있습니다.
클라이언트 측 로직 이중화
SSR은 초기 렌더링을 서버에서 처리하기 때문에 클라이언트 측의 자바스크립트 로직과 중복될 수 있습니다. 예를 들어, 페이지 내의 동적 상호작용이나 데이터 변경이 발생하는 경우 서버와 클라이언트 간의 동기화 문제가 발생할 수 있습니다. 이를 해결하기 위해 초기 상태 전달 및 서버와의 데이터 통신을 조율하는 추가 작업이 필요할 수 있습니다.
제한된 클라이언트 기능 사용
SSR은 서버에서 렌더링하기 때문에 클라이언트 측 기능에 제한이 있을 수 있습니다. 일부 브라우저 API나 서드파티 라이브러리 (개인 개발자나 프로젝트 팀, 혹은 업체등에서 개발하는 라이브러리) 는 클라이언트 환경에서만 사용 가능한 경우가 많으므로 서버 사이드에서는 이러한 기능을 사용할 수 없을 수도 있습니다. 이 경우, 클라이언트 측에서 추가적인 로직을 처리해야 할 수 있습니다.
서버 사이드 렌더링(SSR)은 초기 로딩 속도 개선과 검색 엔진 최적화를 위한 중요한 기술이지만, 서버 부하, 초기 구성 복잡성, 클라이언트 자원 사용, 클라이언트 측 로직 이중화, 제한된 클라이언트 기능 사용 등의 단점도 고려해야 합니다.
그렇다면 SSR의 적절한 사용사례는 어떤 것들이 있을까요?
컨텐츠 사이트
뉴스, 블로그, 포럼 등과 같은 컨텐츠 중심의 웹 사이트는 SSR을 활용하여 초기 로딩 속도를 개선하고 SEO를 향상시킵니다. 사용자들은 빠른 페이지 로딩과 검색 엔진에서의 노출을 기대할 수 있습니다.
전자 상거래 플랫폼
전자 상거래 애플리케이션은 SSR을 사용하여 초기 카탈로그 페이지, 제품 목록, 제품 상세 페이지 등을 렌더링하여 사용자들에게 빠른 로딩 속도와 검색 가능성을 제공합니다.
소셜 미디어 앱
소셜 미디어 플랫폼은 링크 공유 시 미리보기를 제공하는 데 SSR을 사용할 수 있습니다. 링크 클릭 시 빠른 로딩과 풍부한 미리보기 정보를 제공하여 사용자들에게 적절한 링크를 제공합니다.
SSR은 주로 초기 로딩 속도, 검색 엔진 최적화, 소셜 미리보기 등의 이점을 가지고 있어 다양한 앱 종류에서 사용될 수 있습니다. 앱의 특성과 요구사항, 사용자 경험 등을 고려하여 SSR을 적용할지 여부를 결정해야 합니다.
