SPA와 CSR, SSR(+ SSG) (22.08.23)
아래 내용은 예외의 경우가 있을 수 있습니다.
SPA (Single Page Application)
- (서비스 관점에서) 한 페이지 내에서 모든 서비스를 처리하는 것을 말한다.
(반대되는 개념으로는 MPA (Multi Page Application)이 있다.) - 단 하나의 HTML 내에서 변경이 필요한 부분을 Javascript를 통해 동적으로 변경해나간다.
- 대표적인 SPA 프레임워크(혹은 라이브러리)로는 React, Vue, Angular가 있다.
CSR (Client Side Rendering)
- CSR은 최초 한 번 서버에게 웹페이지 구동에 필요한 모든 리소스(HTML, CSS, JS 등)를 받는다.
이후 사용자와의 상호작용을 통해 필요한 부분만을 동적으로 변경시켜나가며 화면을 구성한다. - CSR은 한 개의 HTML 파일만을 변경시켜 나가며 화면을 구성한다.
<장점>
- 초기 로딩 이후엔 클라이언트 내에서 동적으로 화면을 변경해나가므로 속도가 빨라 사용자 경험(UX) 측면에서 긍정적인 효과를 줄 수 있다.
- 화면을 구성하는 리소스와 관련하여 최초에 한 번만 서버와 통신하므로 서버의 부담을 줄여줄 수 있다.
<단점>
- 모든 리소스를 한 번에 받아오므로, 초기 로딩 속도가 느리며 개선의 한계가 있다.
- SEO 최적화가 원활하지 않을 수 있다.
- SEO 최적화를 위해서는 크롤링 봇이 HTML 문서를 탐색해야 하나, SPA의 경우 1개의 HTML 파일만이 존재하므로 효과적인 SEO 최적화가 어렵다.
SSR (Server Side Rendering)
- SSR은 브라우저에서 페이지를 요청할 때마다 서버에 리소스를 요청한다.
- 요청받은 페이지의 리소스만을 돌려주면 되므로 초기 로딩 속도가 빠르다.
- 다만 매 페이지 이동 시 마다 서버에 리소스를 요청하고 받아오므로, 새로고침이 발생하여 사용자 경험(UX) 측면에서 부정적인 효과를 줄 수 있다.
<장점>
- 초기 로딩 속도가 빠르다.
- SEO 최적화를 효율적으로 진행할 수 있다.
<단점>
- 매 페이지 이동마다 서버에 리소스를 요청하고 받아오므로 서버에 부하를 줄 수 있다.
- 매 페이지 이동마다 새로고침이 발생할 수 있다.
번외: SSR과 SSG (Static Site Generation)
SSR은 페이지를 요청받으면 서버사이드에서 HTML파일을 생성한다.
즉, 사용자가 페이지를 이동하여 페이지를 돌려줘야한다면 서버측에서 HTML 파일을 생성하고 그 파일을 반환한다.
SSR은 아래와 같은 환경에서 강점을 보인다.
- 항상 최신 상태를 유지해야하는 경우 (요청마다 시시각각 갱신된 정보를 표현해야할 때)
- 페이지마다 각기 다른 내용의 페이지를 반환해야 할 때
SSG는 Build 시에 페이지 별로 HTML 파일들을 미리 생성해두고 요청받을 때 미리 생성된 HTML 파일을 반환한다.
Next.js가 대표적으로 SSG를 사용하고 있는 프레임워크이다. (pre-rendering을 사용할 시)
SSG는 아래와 같은 환경에서 강점을 보인다.
- 블로그 게시물, 마케팅 페이지처럼 매 번 동일한 문서를 반환해야하는 경우 (잦은 갱신이 불필요)
- 속도와 같은 성능에 집중 할 때
'프로그래밍 > 정리노트' 카테고리의 다른 글
정리노트: DOM과 BOM (0) | 2022.08.23 |
---|---|
정리노트: 자바스크립트는 싱글스레드 (+call stack, queue, event loop) (0) | 2022.08.16 |
정리노트: var, let, const (0) | 2022.08.14 |
정리노트: 스코프 (0) | 2022.08.13 |
정리노트: 호이스팅 (0) | 2022.08.13 |