[개념] 정적, 동적 페이지와 SSR, CSR

[개념]

VaIice 2024. 8. 7. 14:36

Static Web Page

웹 서버에 이미 저장된 파일 (HTML, 이미지, JS 등)을 클라이언트에게 전송한다.

모든 사용자는 서버로부터 고정된, 동일한 콘텐츠를 받게 된다.

ex) 개인 포트폴리오 사이트, 회사 소개 사이트

Dynamic Web Page

웹 서버에서 실시간으로 콘텐츠를 생성하고 제공하는 웹 페이지

사용자는 상황, 시간, 요청 등에 따라 달라지는 웹 페이지를 보게 된다.

ex) 블로그, 뉴스 사이트, 커뮤니티

Server Side Rendering

서버에서 렌더링 준비를 마친 상태로 클라이언트에게 전송한다.

서버에서 렌더링이 된 채로 클라이언트에게 전송되기 때문에, 유저는 즉시 화면을 볼 수 있다.

하지만 JS가 렌더링 되기 전이기 때문에, 사이트 조작은 불가능하다.

다만, 사용자의 조작을 기억하고 있다가 JS가 렌더링 되면, 상호작용이 가능해진다.

SSR는 필요한 페이지의 HTML, CSS와 스크립트를 불러오기 때문에, 첫 페이지의 로딩 시간은 CSR보다 빠르다.

하지만, 해당 사이트의 다른 페이지를 불러왔을 때, SSR은 서버로부터 다시 데이터를 불러와야 하기 때문에, CSR보다 느릴 수 있다.

SSR은 서버 사이드에서 렌더링이 되어 클라이언트로 전송하기 때문에, SEO (검색 엔진 최적화)에 용이하다.

서버에서 렌더링을 하기 때문에, 서버에 부담이 간다.

Client Side Rendering

렌더링이 클라이언트 쪽에서 일어나기때문에, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 전송한다.

서버에서 처리 없이 클라이언트에게 HTML과 JS를 전송하기 때문에, JS의 렌더링이 끝나기 전까지 유저는 어떤 화면도 볼 수 없다.

CSR은 HTML, CSS와 모든 스크립트를 한 번에 불러와 렌더링 하기 때문에, 첫 페이지의 로딩 시간은 SSR보다 속도가 느리다.

하지만, 해당 사이트의 다른 페이지를 불러왔을 때, 이미 필요한 리소스를 로드했기 때문에, SSR보다 빠르다.

SEO 대응 측면에서, CSR은 JS를 실행시켜 동적으로 컨텐츠를 생성하기 때문에, JS가 실행되어야 메타데이터가 변경된다. 따라서 SEO (검색 엔진 최적화)에 불리하다.

클라이언트 측에서 렌더링을 하기 때문에, 서버의 부담을 덜 수 있다.