서버에서 처리되는 방식과 목적에서 차이가 있다.

1. 서버사이드 렌더링(SSR)

클라이언트가 웹 페이지를 요청하면, 서버에서 HTML을 렌더링하여 완성된 페이지를 클라이언트에게 전송하는 방식. 주로 Javascript 기반의 싱글 페이지 애플리케이션(SPA)에서 사용된다.

동작방식

1. 사용자가 브라우저에 웹 페이지를 요청
2. 서버는 해당 요청에 맞는 데이터를 처리하고 HTML을 생성
3. 브라우저는 이 HTML을 받아서 페이지를 렌더링
4. 초기 로딩 속도가 빠르며 SEO에도 유리하다.

*SEO : 검색 엔진 최적화, 웹 사이트가 검색 결과에 더 잘보이도록 최적화 하는 과정

React, Vue 등 자바스크립트 프레임워크에서 SSR을 도입하면 초기 HTML을 서버에서 렌더링하고 이후 인터랙션은 클라이언트에서 처리하게 된다.

2. 서버사이드 캐시

서버에서 반복적인 요청에 대해 동일한 결과를 재계산하는 비용을 줄이기 위해 결과를 미리 저장하고, 이후 동일한 요청이 들어왔을때 저장된 데이터를 제공하는 방식.

동작방식

1. 클라이언트가 동일한 요청을 여러번 보내더라도 서버는 최초 요청에 대한 처리결과를 캐싱하여 저장
2. 이후 동일한 요청이 발생하면 캐시된 데이터를 빠르게 반환
3. 데이터베이스 쿼리나 API 요청의 결과, HTML 등을 캐싱할 수 있다.
4. 캐시 유효기간이 지나면 데이터를 갱신해서 최신 데이터를 반영한다.

서버사이드 캐시는 성능 최적화의 중요한 요소로, 불필요한 데이터 처리작업을 줄이고 응답속도를 개선한다.

3. 서버사이드 렌더링(SSR) 서버사이드 캐시 차이점

목적

• SSR : 클라이언트가 요청한 웹 페이지를 서버에서 완전한 HTML 형태로 렌더링해서 전달하는 것
• 서버사이드 캐시 : 서버에서 처리한 결과를 저장해서 동일한 요청에 대해 빠르게 응답하는 것

활용

• SSR : 주로 동적 컨텐츠 렌더링을 개선하고 SEO를 향상시키기 위해 사용
• 서버사이드 캐시 : 서버 부하를 줄이고 응답 속도를 높이기 위해 사용

이 둘은 종종 함께 사용될 수 있다. 예를 들어 SSR로 생성된 HTML을 서버사이드 캐시를 통해 저장해서 반복된 요청 시 빠르게 제공하는 방식으로 성능을 최적화할 수 있다.