[240326] 호이스팅, CSR와 SSR의 차이점

2024.03.26

Careertone Challenge Study 03

 

 

호이스팅에 대해 설명해주세요.

자바스크립트에서 변수 선언과 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상입니다. 자바스크립트 엔진이 코드를 실행하기 전에 런타임에서 일어납니다. 호이스팅으로 인해 변수나 함수를 선언하기 전에도 해당 요소에 접근할 수 있습니다. 하지만 이렇게 사용하는 것은 일반적으로 권장되지 않으며, 오류를 발생시킬 수 있습니다. let과 const는 호이스팅되지만, Temporal Dead Zone(TDZ)에 의해 선언되기 전에는 참조할 수 없습니다. 이는 변수를 사용하기 전에 선언해야 한다는 규칙을 강화해, 코드의 안정성을 높이는 데 도움이 됩니다.

 

 

 

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주세요.

서버 사이드 렌더링(SSR)

서버에서 완전한 HTML을 생성하여 클라이언트에게 전송하는 방식입니다. 서버에서 렌더링된 HTML을 클라이언트가 받아 화면에 표시합니다.

[장점] 검색 엔진이 서버에서 렌더링된 완전한 HTML을 수용하기 때문에 SEO에 유리합니다. 사용자가 페이지를 요청할 때 이미 렌더링된 HTML을 제공하기 때문에 초기 로딩이 빠릅니다.

[단점] 매 요청마다 서버에서 새로운 HTML을 생성해야 하므로 전체적인 성능이 CSR보다 느릴 수 있습니다. 많은 사용자가 동시에 서버에 접속하면 서버 부하가 증가할 수 있습니다

→ 동적인 웹 애플리케이션에 적합하며 빠른 인터랙티브 경험을 제공할 수 있지만, SEO와 초기 로딩 지연이 문제가 될 수 있습니다.

 

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

초기 로드 후에 추가적인 데이터를 클라이언트에서 받아와 동적으로 렌더링하는 방식입니다. 초기 HTML은 정적이며, JavaScript를 사용해 동적 컨텐츠를 렌더링합니다.

[장점] 필요한 최소한의 데이터만 전달되어 초기 로딩이 빠릅니다. 페이지 로드 후 JavaScript를 사용해 데이터를 비동기적으로 가져와 동적으로 업데이트할 수 있습니다.

[단점] 초기 HTML에 동적 컨텐츠가 포함되지 않아 SEO에 어려움이 있습니다. 초기 로딩 이후 추가적인 데이터를 받아오기 때문에 지연 현상이 발생합니다.

→ SEO에 유리하고 초기 로딩이 빠르지만, 서버 부하가 늘어날 수 있는 단점이 있습니다