티스토리 뷰
SPA
SPA : Single Page Application
하나의 HTML파일을 기반으로 JavaScript를 이용해 동적으로 재작성하는 최초 한 번 페이지 전체를 로딩하고, 그 속에 있는데 데이터만 변경해서 사용하는 애플리케이션입니다.
Gmail, Google Maps, AirBNB, Netflix, Paypal 등의 기업에서 SPA를 사용하여 만듭니다.
CSR
CSR: Client Side Rendering
브라우저가 HTML과 JS 파일을 요청을 하고 로드가 되면 그 후 사용자의 기호에 따라 동적으로 렌더링을 시키는 것입니다.
실생활 예로 들자면 서점에 방문하여 필요한 책을 구입하는데 1시간을 소요하고 집에서 필요한 책이 있을 때 책장에서 꺼내서 보는 것입니다.
장점
- 필요한 데이터만 받으므로 트래픽이 감소합니다.
- 새로고침을 할 필요가 없어 사용자 경험(UX)이 좋아져 네이티브 앱과 같은 느낌의 경험을 할 수 있습니다.
단점
- 검색 봇의 크롤러가 데이터 수집에 어려움을 겪어 검색엔진 최적화(SEO)에 문제가 될 수 있습니다.
- 해당하는 모든 스크립트 파일들이 로드가 될 때까지 기다려야 합니다.
SSR
SSR: Server Side Rendering
브라우저가 페이지를 요청할 때마다 해당 페이지에 맞는 HTML, CSS, JS 파일 그리고 데이터를 받아와서 렌더링을 시킵니다.
실생활 예로 들자면 필요한 책이 있을 때마다 서점을 수시로 방문하는 것과 같습니다.
장점
- 렌더링을 이용한 것이 아니므로 검색엔진을 최적화(SEO)시킵니다.
- 초기로딩의 성능을 개선하기 때문에 컨텐츠를 빨리 볼 수 있습니다.
단점
- 라우터를 사용하여 프로젝트가 복잡해집니다.
- 서버에 요청을 수시로 하기 때문에 성능이 악화될 수 있습니다.
참고
[주니어탈출기] 서버사이드렌더링(SSR) & 클라이언트사이드렌더링(CSR)
댓글
