<Web> CSR vs SSR / SPA vs MAP

Google 아니고 Joogle·2022년 9월 15일

0

web

목록 보기

7/7

1. CSR (Client Side Rendering)

정의

렌더링이 클라이언트 쪽에서 일어나며, 서버는 요청을 받으면 클라이언트에 html, js를 보내주고 클라이언트는 그것을 받아 렌더링을 시작

과정

User가 Website 요청을 보냄
*CDN이 html, js로 접근할 수 있는 링크를 클라이언트에게 보냄
클라이언트는 html, js를 다운받음 (이때 유저는 아무 것도 볼 수 없다)
다운 완료된 js가 실행되고, 데이터를 위한 API가 호출
API로부터 다운 받아온 data를 placeholder 자리에 넣어주고, 이제 페이지는 상호작용이 가능

*CDN

엔드 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식

장단점

새로고침이 발생하지 않기 때문에 네이티브 앱(흔히 말하는 애플리케이션)과 같은 경험을 할 수 있음
필요한 데이터만 받기 때문에 트래픽이 감소함
검색 엔진 크롤러가 데이터 수집에 어려움이 있을 가능성이 존재함

사용

네트워크가 빠르거나 서버의 성능이 좋지 않을 때
사용자에게 보여주어야 하는 데이터 양이 많을 때
웹 어플리케이션에 사용자와 상호작용할 것이 많을 때

2. SSR (Server Side Rendering)

정의

말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식

과정

User가 Website 요청을 보낸다
Server는 Ready to Render. 즉, 즉시 렌더링 가능한 html 파일을 만듦
클라이언트에게 전달되는 순간, 이미 렌더링이 되어 있기 때문에 html은 즉시 렌더링이 된다 (하지만 js가 읽기 전이라 사이트 조작은 불가능한 상태)
클라이언트가 js를 다운 받음
다운 받아지고 있는 사이에 컨텐츠를 볼 수는 있지만 조작할 수는 없다
브라우저가 js 프레임워크를 실행
js 까지 성공적으로 컴파일이 되면 기억하고 있던 사용자 조작이 실행되고, 웹 페이지는 상호작용을 한다

장단점

검색 엔진 최적화 (SEO): js가 도착하기 전에 완성된 형태의 템플릿(html에 데이터가 삽입된 상태)을 서버로부터 전달받기 때문에, 검색 로봇이 페이지를 크롤링하기에 매우 적합
초기로딩 성능 개선 : 첫 렌더링된 html을 클라이언트에서 전달해주기 때문에 초기로딩속도를 많이 줄여줌
프로젝트 복잡, 성능 악화 가능성

사용

네트워크가 느릴 때
최초 로딩이 빨라야하는 사이트를 개발할 때
웹 사이트가 상호작용이 별로 없을 때

3. CSR vs SSR

웹 페이지 로딩 시간

웹 페이지 로딩 시간은 웹 사이트의 가장 첫 페이지를 로딩하는 것, 나머지를 로딩하는 것으로 나눌 수 있다
첫 페이지 로딩 시간에서 CSR의 경우 html, css와 모든 스크립트를 한 번에 불러오고, SSR은 필요한 부분의 html과 스크립트만 불러오기 때문에 평균적으로 SSR이 더 빠르다
나머지 로딩 시간은, 첫 페이지를 로딩한 후, CSR은 이미 첫 페이지를 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다. 하지만 SSR은 첫 페이지를 로딩한 과정을 정확하게 다시 실행해서 느림

SEO 대응

검색 엔진은 자동화된 로봇인 '크롤러'로 웹 사이트를 읽음
CSR은 js를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 js가 실행되어야 metadata가 바뀜
SSR은 애초에 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤링에 대응하기 용이하다
(구글 검색엔진은 자바스크립트 엔진이 내장되어있지만, 네이버나 다음 등 검색엔진은 크롤링에 어려움이 있어 SSR을 따로 구현해야하는 번거로움 존재)

서버 자원 사용

SSR은 매번 서버에 요청을 하기 때문에 자원을 더 많이 사용

4. SPA (Single Page Application)

정의 & 설명

한 개의 page로 구성된 application
SPA는 CSR방식으로 렌더링 한다 (하지만 모든 방식이 CSR인 것은 아님)
단 한 번만 리소스 (html, css, js)를 로딩하고 그 후에는 데이터를 받아올 때만 서버와 통신을 함
즉, 첫 요청시 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정해서 보여주는 방식

장단점

전체 페이지를 업데이트 할 필요가 없기 때문에 자연스러운 사용자 경험 제공
서버에게 정적 리소스를 한 번만 요청하고 받은 데이터는 모두 저장해놓는다
서버의 템플릿 연산을 클라이언트로 분산
js파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느림
SSR에서는 사용자에 대한 정보를 서버측에서 세션으로 관리하지만 CSR 방식에서는 클라이언트측의 쿠키 말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않음

5. MAP (Multiple Page Application)

정의 & 설명

여러 개의 page로 구성된 Application
MPA는 SSR방식으로 렌더링되고 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스가 다운된다
페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링 한다

장단점

SEO관점에서 유리 → 완성된 형태와 html 파일을 서버로부터 전달받기 때문에 검색엔진이 크롤링하기에 적합
첫 로딩이 매우 짧음
매 페이지 요청마다 리로딩이 발생하기 때문에 (새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링) 새로운 페이지를 이동하면 '깜빡'임 → 불필요한 템플릿도 중복해서 로딩, 서버 렌더링에 따른 부하 발생

6. SPA vs MAP

기술적으로는 SPA는 어떤 페이지를 접속하더라도 html, css, js 동일한 파일 하나만 접속한 페이지에 맞게 화면을 구성하고, MPA는 페이지 별로 해당 페이지에 맞는 html, css, js 파일을 받아서 화면을 구성함
일반적으로 SPA + CSR , MPA + SSR 이 사용된다. 예를 들어 React, Vue, Angular같은 JS 기반 프레임워크를 사용하게 되면 기본적으로 html, css, js파일이 하나씩 오기 때문에 자연스레 SPA가 되면서 CSR이 되는 것
통계적으로 PC보다는 모바일에서 웹과 앱의 사용이 증가하고 있는데, 모바일의 경우 적은 트레픽과 빠른 인터렉션이 중요해지기 때문에 SPA가 부상

Reference

Google 아니고 Joogle

Backend 개발자 지망생

이전 포스트

<Web> Asynchronous (callback, promise, await)

0개의 댓글