SPA: Single Page Application
SPA(Single Page Application)는 직역하면 단일 웹페이지로 돌아가는 애플리케이션을 의미
SPA는 브라우저에서 자바스크립트를 이용하여 단일 웹페이지 상의 HTML 요소를 동적으로 생성하고 조작한다.
서버 측에서는 텅빈 HTML 문서 하나와 자바스크립트 코드만 내려주고 그 이후에 모든 일들은 클라이언트 측에서 브라우저가 비동기로 처리한다.
예 ) React, Svelte, Vue.js
<body>
<div id="root"></div>
</body>그래서 SPA 프로젝트의 상단 파일은 이렇게 생겼을 가능성이 높다.
장점
- 운영체제에 설치해서 사용하는 네이티브(native) 애플리케이션과 같은 사용자 경험을 제공할 수 있다.
- 클라이언트에서 최초에 한 번 자바스크립트 코드를 내려받으면 그 이후로는 서버와 네트워크 통신을 할 필요가 없어서 페이지 별로 끊어지는 느낌이 없다.
단점
- 지나치게 자바스크립트에 의존.
자바스크립트가 돌아가지 않는 브라우징 환경에서 완전히 먹통된다. - 웹사이트 최초 로딩시간이 비교적 김.
클라이언트에서 내려받아야하는 자바스크립트의 코드의 양이 많기 때문이다. - 검색 엔진 최적화(SEO) 측면에서도 상당히 불리.
크롤러(crawler)가 웹페이지에서 읽어갈 수 있는 내용이 달랑요소 밖에 없기 때문이다.
SSR: Server-Side Rendering
서버 측에서 웹페이지를 랜더링하는 기술
빌드 타임에 웹사이트 전체를 미리 만들어 놓는 것이 아니라, 클라이언트로 부터 요청이 들어올 때마다 실시간으로 해당 웹페이지를 만들어낸다.
데이터가 수시로 업데이트되고, 개인화된 경험을 제공해야하는 전자 상거래(E-commerce) 플랫폼이나 소셜 네트워크 서비스(SNS)에 매우 적합.
장점
1.변경된 데이터가 즉시 웹페이지에 반영이 되고 유저마다 다른 경험을 제공하기도 용이
단점
- 서버 측에서 웹페이지를 랜더링하기 위해서 애플리케이션 서버가 추가로 필요.
- SPA나 SSG 대비 느리고 무거움.
요청이 들어온 순간 서버에서 웹페이지를 만들어내고 이를 네트워크를 통해 클라이언트에 전송하기 때문이다.
SSG: Static Site Generator
정적 사이트 생성기로 번역할 수 있다.
누가 접속하든 항상 동일한 내용을 보여주는 웹사이트를 만드는데 최적화된 방법.
SSG로 생성되는 웹사이트는 모든 웹페이지를 미리 만들어놓고 요청이 들어오면 만들어 놓은 웹페이지를 그대로 응답만 해준다.
제품 카탈로그나 개인 블로그처럼 컨텐츠의 변경이 자주 일어나지 않는 비교적 소규모 웹사이트를 제작할 때 매우 유용하다.
서버와 클라이언트 측 모두 랜더링을 위해서 할 일이 별로 없기 때문에 SSG로 생성된 웹사이트는 속도가 엄청 빠르다.
장점
- SPA와 달리, 미리 만들어놓은 수 많은 웹페이지로 이루어졌기 때문에 검색 엔진이 크롤링하기 매우 적합한 구조.
단점
- 컨텐츠가 자주 업데이트되는 웹사이트에서는 큰 비효율.
빌드 시점에 웹사이트 전체를 매번 다시 만들어 내는 이유 때문이다. - 규모가 커지면 빌드시간이 길어짐.
변경된 컨텐츠가 웹사이트에 반영되는데 시간이 점점 오래 걸리 게 되기 때문이다.
