[web] 서버 사이드 렌더링, 클라이언트 사이드 렌더링

서버 사이드 렌더링(SSR)

 - 웹 페이지의 HTML이 서버에서 생성되고 완성된 HTML 파일이 클라이언트(브라우저)로 전송되는 방식

 - 브라우저는 서버로부터 HTML을 받은 즉시 화면에 렌더링 할 수 있음

 - 장점 : 빠른 첫 화면 로딩, SEO(검색 엔진 최적화), 초기 로딩 속도 빠름

 - 단점 : 서버 부하, 느린 상호작용

 

클라이언트 사이드 렌더링(CSR)

 - HTML, Javascript, CSS 파일을 클라이언트로 전송한 뒤, 브라우저가 Javascript로 HTML을 동적으로 생성하여 렌더링 하는 방식

 - 초기 요청에는 Javascript 파일이 전달되고, 이후 브라우저에 페이지가 렌더링됨

 - 장점 : 빠른 페이지 전환, 상호작용이 높은 애플리케이션(SPA), 서버 부하 감소

 - 단점 : 첫 화면 로딩이 느릴 수 있음, SEO 문제, 높은 Javascript 의존성

 

SSR과 CSR 비교

 

SSR과 CSR을 혼합한 방식(하이브리드 렌더링 또는 SSR + CSR)

 - SSR과 CSR의 장점을 결합한 방식

 - 초기 페이지는 SSR 방식으로 빠르게 렌더링하고, CSR 방식으로 동작하여 페이지 전환 속도를 높이는 방식

 - Next.js, Nuxt.js 같은 프레임워크에서 제공하는 기능