TIL(20240721) [Rendering- SSR vs CSR]

---

✨ 들어가기전 ..

• 렌더링? HTML, CSS, JavaScript 등을 사용하여 웹 페이지를 사용자가 볼 수 있는 형태로 변환하는 과정을 말하며 여기서 주로 다루는 렌더링 방식은 아래와 같다.

📌 SSR vs CSR

• SSR(Server Side Redering) - ex) viewController
  1) 서버 측에서 페이지의 초기 HTML을 생성하여 클라이언트에 전달하는 방식 2) 사용자가 페이지에 접근하면 서버는 요청된 페이지에 대해 서버 측에서 HTML을 생성하고 데이터를 채워서 전달한다. 3) 장점은?
  A) SEO (검색 엔진 최적화) 검색 엔진은 초기 HTML을 쉽게 읽고 인덱싱할 수 있다.
  B) 사용자가 페이지를 요청할 때 서버에서 완전한 페이지를 받아 바로 렌더링할 수 있어 초기 로딩 속도가 빠르다. 4) 단점은?
  A) 서버 부하, 매 요청마다 서버는 HTML을 생성해야 하므로 서버 자원이 많이 필요할 수 있다. B) 사용자 경험 좋지 않을 수 있다. 초기 HTML이 전달된 후에 추가적인 데이터 로딩이 필요할 수 있어 페이지가 완전히 로드될 때까지 사용자가 기다려야 할 수 있다.

- SEO란? SEO는 Search Engine Optimization의 약자로, 검색 엔진 최적화를 의미한다. 웹사이트나 웹 페이지가 검색 엔진 결과 페이지(SERP)에서 상위에 노출되도록 최적화하는 작업이나 전략을 말하며, 주요 검색 엔진인 구글, 네이버, 빙 등에서 사용자가 특정 키워드로 검색을 할 때, 그 검색 결과에서 상위에 노출될 수 있도록 사이트의 구조, 콘텐츠, 링크 등을 최적화하는 것이 주된 목적

• CSR(Client Side Rendering) ex) controller
  1) CSR은 초기 HTML과 정적 리소스를 받은 후, 클라이언트에서 JavaScript를 사용해 동적으로 페이지를 렌더링하는 방식 2) 초기에는 서버에서 기본적인 HTML과 정적 자원(CSS, JavaScript 등)을 받은 후, 클라이언트에서 JavaScript를 사용해 추가적인 데이터를 요청하고 페이지를 렌더링한다. 3) 장점 ?
  A) 빠른 상호작용, 한 번 페이지를 로드한 후에는 서버에 요청 없이 빠르게 상호작용할 수 있다. B) 서버 부하 감소, 서버는 초기 HTML과 정적 자원만 전달하면 되므로 서버 부하가 상대적으로 적다. 4) 단점 ?
  A) SEO 어려움, 초기 HTML에 동적으로 생성되는 컨텐츠가 포함되지 않아 SEO에 불리할 수 있다.

  ** 어플리케이션이 검색엔진 최적화가 필요한 경우 CSR형식은 사용하기 어려울 수 있다 라고 이해했다.

  B) 초기 로딩 지연, 사용자가 페이지를 처음 요청할 때 JavaScript 파일을 다운로드하고 실행해야 하므로 초기 로딩 속도가 느릴 수 있다.

즉, 정리하자면!

• SSR: 서버 측에서 템플릿 엔진을 사용하여 초기 HTML을 생성하고 클라이언트에 전송한다.
• CSR: 클라이언트 측에서 JavaScript를 사용하여 데이터를 가져와 동적으로 페이지를 구성한다.