3세대 웹 - SPA 의 등장
기존에는 동일한 서버에서 html, css, js를 매번 전송해야하는 방식이었다.
하지만 웹 서비스의 발전으로 SPA(Single Page Application) 가 나타나면서 자바스크립트로 html 태그를 동적으로 생성할 수 있게 되었다.
그로인해 html, css, js 영역과 데이터 영역이 분리되기 시작하고 개발업무 또한 프론트엔드와 백엔드로 나뉘어서 발전하게 된다.
SPA와 MPA의 차이점
📌 SPA (Single Page Application)
- html 파일이 한 개이다.
- 페이지를 이동할때 서버로부터 html 파일을 받아서 이동하는것이 아닌, 자바스크립트 내의 특정 함수를 타서
<div id="root" />의 내용을 교체한다. - 페이지 이동시 화면 깜박임 X
📌 MPA (Multi Page Application)
- 정적 웹사이트로 구성된 html 파일이 여러 개이다.
- 페이지 이동시 화면 깜박임 O
CSR과 SSR의 차이점
📌 CSR (Client Side Rendering)
- 웹 페이지의 렌더링이 클라이언트(브라우저)측에서 일어나는것을 의미한다.
- 백엔드 서버에서 최초 호출시에만 html, css, js를 받아오고 그 후에는 사용자의 상호작용에 따라서 필요한 만큼의 데이터만 요청한다.
장/단점
- 최초 호출 이후에는 동적으로 빠르게 렌더링 하기 때문에 사용자 UX가 뛰어나다.
- 필요한 만큼의 데이터만 요청하기 때문에 서버 부하의 위험이 적다.
- SEO(검색엔진 최적화) 문제가 발생할 수 있다.
📌 SSR (Server Side Rendering)
- CSR과 반대로 서버측에서 렌더링을 한 뒤 브라우저에 보여지는 방식이다.
장/단점
- SEO 측면에서 유리하다.
- 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 UX가 다소 떨어진다.
- 사용자의 상호작용에 따라 서버에 계속 새로 요청을 하기 때문에 트래픽, 서버 부하가 커진다.
SEO(Search Engine Optimization)
왜 SPA의 CSR에서 SEO 문제가 생길까?
우리가 평상시처럼 CRA로 프로젝트 초기세팅을 완료하여 build 할 경우 그 사이트는 Only CSR 로 실행된다. 그렇게되면 아래와 같이 CSR의 실행단계에서 구글봇이 웹 사이트에 대한 정보를 가져오지 못하고 그 경우 SEO 문제가 발생하게된다.
-
브라우저는 최초 요청에서 html, js, css 확장자의 파일을 차례로 다운로드.
-
최초로 불러온 html의 내용은 비어있음. (html, body 태그만 존재)
→ 이 단계에서 구글봇이 빈 html을 크롤링 하기때문에 검색 노출이 안되는 문제 발생.
-
js 파일의 다운로드가 완료된 다음, 해당 js 파일이 dom을 빈 html 위에 그리기 시작.
CSR + SSR? ⇒ Next.js (like CRA)
- 그렇다면 SSR과 CSR을 섞어 쓸 수는 없나요?
- 사용할 수 있다! ⇒ 생산성을 위해 Next.js가 주로 채택
- SSR의 CRA 간단히 구성 가능
- 원티드, 토스, 배민, 카카오커머스 등 사용 중
HHJ velog 🍔