Skill Interview 5

기술면접

기술영역 : SPA
질문 : CSR과 SSR의 개념적 차이와 동작방식을 구분하여 설명

SPA(single-page application) : 서버로부터 완전한 페이지를 불러오지않고 화면을 업데이트 하기위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹사이트나 웹어플리케이션

CSR(Client Side Rendering) : 클라이언트에서 페이지를 렌더링 하는 방식

CSR의 동작
1. 웹 페이지를 방문하면 클라이언트는 html파일을 다운로드한다.
2. 클라이언트는 html에 있는 자바스키립트 파일을 다운로드 한 다음 API 요청을 수행하여 동적 컨텐츠를 가져오고 파싱하여 최종 컨텐츠를 렌더링한다.
3. 페이지 이동시에는 서버에 추가로 html파일을 요청하지 않고 기존에 받은 자바스크립트 파일을 이용하여 렌더링 한다.

CSR의 장점

• 서버와 클라이언트 간의 데이터 양과 트래픽이 현저히 감소
• 단 한번의 렌더링만 있기 때문에 페이지 이동이 빠름

CSR의 단점

• SEO(Search Engine Optimization : 검색 엔진 최적화) 사용 불가
• 초기 렌더링 속도가 느림

SSR(Server Side Rendering) : 서버에서 페이지를 렌더링 하는 방식

SSR의 동작
1. 웹 페이지를 방문하면 서버는 리소스를 확인하고 페이지 내에 있는 서버스크립트를 실행한 후 html컨텐츠를 컴파일 및 준비한다.
2. 컴파일 된 html은 추가 렌더링 및 표시를 위해 클라이언트로 전송된다.
3. 클라이언트는 html을 다운로드하고 클라이언트에 띄워준다.
4. 클라이언트는 자바스크립트를 다운로드하고 실행하면서 페이지를 대화형으로 만든다. (요청 -> 응답)
5. 페이지를 이동하면 위 동작을 반복한다.

SSR의 장점

• 초기 렌더링 속도가 빠름
• SEO 사용 가능

SSR의 단점

• 페이지 이동 속도가 느림
• 간단한 데이터 수정도 서버를 거쳐야 함
• 연속적 렌더링을 할 경우 서버 비용 증가 및 과부화로 서버가 다운될 수 있음