SPA & SSG & SSR

1. SPA 란?

Single Page Application

브라우저에서 JS를 이용하여 단일 웹페이지 상의 HTML 요소를 동적으로 생성하고 조작.

모든 랜더링이 클라이언트 측에서 일어난다해서 CSR( Client-Side Rendering) 이라고도 한다.

사용자 경험 ( UX ) 측면에서는 확실한 강점을 보유.

지나친 자바스크립트 의존성이 치명적인 약점으로 작용.

클라이언트에서 내려받아야하는 자바스크립트 코드 양이 적지 않아,

네트워크 품질에 따라 최초 로딩 시간이 오래 걸릴 수 있다.

 

2. SSG 란?

Static Site Generator

누가 접속하든 항상 동일한 내용을 보여주는 웹사이트를 만드는데 최적화된 방법.

대표적인 SSG로는 Gatsby, Hugo, Jekyll, Hexo 등이 있다.

모든 웹페이지를 미리 만들어놓고 요청이 들어오면 그대로 보여주기만 하기 때문에,

속도가 엄청 빠르다는 이점.

빌드 시점에 웹사이트 전체를 만들어 내다 보니, 컨테츠가 자주 업데이트되는 웹사이트에서는 비효율적.

 

3. SSR 란?

Server-Side Rendering

클라이언트로부터 요청이 들어올 때마다, 실시간으로 해당 웹페이지를 만든다.

변경된 데이터가 즉시 웹페이지에 반영, 유저마다 다른 경험을 제공하기에 용이.

웹페이지 렌더링을 위한 애플리케이션 서버가 추가로 필요.