[React] SPA, CSR, SSR, SSG 알아보기

웹 개발 관련해서 프로젝트를 진행하다보면 서버 사이드 렌더링, 클라이언트 사이드 렌더링 등  SPA, CSR, SSR, SSG 와 같은 용어를 자주 마주칠 수 있습니다.

이때 SPA, SSR, SSG는 무엇을 의미하는 것일까요? 웹 개발 용어에서 꼭 알아야하는 용어로 모르고있었다면 이번에 그 의미를 알아두도록합시다!

 

1) SPA (Single Page Application)

단일 웹페이지로 동작하는 애플리케이션으로 기존 웹 페이지처럼 새로운 페이지를 로드하는 방식이 아닌 하나의 페이지 안에서 필요한 데이터만 가져오는 형태입니다. 즉 처음에 페이지를 가져오고 두번째 이후에는 api로 부터 필요한 데이터만 받아 화면을 업데이트하는 것입니다.

 

React, Vue.js 등 자바스크립트 라이브러리로 구현 가능 합니다. 필요한 데이터만 가져오므로 웹사이트가 끊김이 없다는 것이 장점이지만 자바스크립트에 의존적이기 때문에 자바스크립트가 돌아가지 않는 브라우져 환경에서는 먹통이 될 수 있습니다.

2) CSR (Client Side Rendering)

서버에서 html을 받아와 적힌 js주소를 서버에 요청해 동적으로 사용자에게 최적화된 애플리케이션을 보여줍니다. 서버에 정보를 넘겨야 처음 보이는 화면을 나타낼 수 있기에 클라이언트에서 업데이트하는 시간이 오래 걸리 수 있습니다. html에는 어느 정보를 받아와야한다는 것만 적혀있기때문에 검색 엔진 같은 기능에서 구현이 어려울 수 있습니다.

3) SSR (Server Side Rendering)

서버에서 웹페이지를 렌더링하는 기술입니다. 클라이언트 요청이 들어올때마다 실시간으로 해당 웹페이지를 만들어냅니다. 변경된 데이터가 즉시 웹페이지에 반영되고 유저마다 다른 경험을 제공하기도 용이합니다. html에 모든 정보가 담겨있어 CSR보다 더 빠르게 사용자에게 뷰를 보여줍니다.

 

따라서 개인화된 경험을 제공해야하는 전자 상거래 플랫폼이나 sns 사이트에 적합합니다. 하지만 SPA나 SSG 대비 무겁고 느린 경향이있습니다.

4) SSG (Statitc Site Generator)

정적 사이트 생성기는 누가 접속하든 항상 동일한 내용을 보여주는 웹사이트를 만들때 적합한 방식입니다. 즉 미리 서버에 화면을 저장해두었다가 꺼내쓰는 방식입니다. 그래서 컨텐츠 변경이 잦지않은 소규모 웹사이트를 제작할 때 유용한데요 정적 사이트 도구는 Gatsby,  Hugo 등을 주로 사용합니다.

 

만들어 놓은 웹페이지를 그대로 보여주기때문에 빠르다는 장점이 있습니다. 컨텐츠를 자주 업데이트하는 사이트에서는 빌드시간이 길어져 비효율적입니다.

 

 

---

📚출처

spa,ssg,ssr: https://www.daleseo.com/spa-ssg-ssr/