목차
· SPA(Single Page Application)
· CSR(Client Side Rendering)
· CSR의 장점과 단점
· SSR(Server Side Rendering)
· SSR의 장점과 단점
· CSR vs SSR
· SEO(Search Engine Optimization)
React, Vue, Angular와 같이 SPA(Single Page Application)방식으로 개발하는 경우 여러가지 장점이 많지만, SEO(Search Engine Optimization)가 잘 되지 않는다는 단점이 있다. 그렇기 때문에 사용자들에게 정보제공을 하고 유입을 증가시켜야하는 경우 SPA 방식이 불리할 수 있다. 하지만 SSR 방식으로 개발을 진행할 경우에는 SPA 두마리 토끼를 다 잡을 수 있다고 한다.
SPA(Single Page Application)
- 최초 한번 페이지를 로딩한 이후 JS를 이용해 동적으로 데이터만 변경하여 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션이다.
- 웹에서 제공하는 정보량이 많아지고, 데스크탑보다 성능이 떨어지는 모바일에 최적화시키기 위해 등장했다.
- 서버는 단지 JSON 파일만 보내주는 역할을 수행하며, HTML을 그리는 역할은 클라이언트에서 JS로 수행한다. 그리고 이 방식은 뒤에 설명할 CSR 방식이다.
CSR(Client Side Rendering)
CSR은 최초 한번 서버에서 전체 페이지를 로딩하여 보여주고, 이후 사용자의 요청에 따라 JS를 이용하여 필요한 리소스를 서버로부터 제공받고 클라이언트가 데이터를 해석 및 렌더링 하는 방식이다. (HTML을 그리는 역할을 클라이언트가 JS로 수행)
1. 유저가 브라우저를 통해 앱(서버)에 접속을 한다.
2. 앱(서버)은 브라우저에게 자바스크립트 정보가 들어있는 빈 html 문서를 전달한다. 즉, 브라우저에게 자바스크립트 파일을 전달하는 것으로 볼 수 있다.
3. 브라우저는 자바스크립트 파일을 다운로드하고 동시에 유저는 빈 화면을 보게된다. (접속에 대한 응답)
4. 브라우저의 자바스크립트 다운로드가 끝나면, 리액트 코드가 있는 JS 파일을 실행한다.
5. 브라우저에 있는 리액트 코드가 UI를 렌더링 시킨다. (동적 렌더링)
6. 유저는 드디어 앱이 보여주고자 했던 화면을 마주한다.
위의 CSR 과정에 대한 더 세부적인 설명
1. User가 Website 요청을 보냄.
2. CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다.
CDN : aws의 cloudflare를 생각하면 됨. 엔드 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식
3. 클라이언트는 HTML과 JS를 다운로드 받는다. (이때 SSR과 달리 유저는 아무것도 볼 수 없다)
4. 다운이 완료된 JS가 실행된다. 데이터를 위한 API가 호출된다.
(이때 유저들은 placeholder(빈 화면)를 보게된다)
5. 서버가 API로부터의 요청에 응답한다.
6. API로부터 받아온 data를 placeholder 자리에 넣어준다. 이제 페이지는 상호작용이 가능해진다.
즉, 브라우저가 자바스크립트 코드를 가지고 있지 않거나 요청 중인 상태라면 UI를 구성할 수 없고, 유저는 빈 화면을 보게 된다. 리액트 코드가 실행되기 전까지는 유저 화면에 아무것도 보이지 않는 것이다. 이렇게 클라이언트 측에서 UI를 빌드하는 것을 CSR 방식이라고 한다.
CSR의 장점
- 첫 로딩만 기다린다면 이후부터는 좋은 사용자 경험(UX)를 제공한다.
- 연속된 렌더링으로 인한 과부하를 줄일 수 있다. (전체를 렌더링하는 Vanila JS보다 성능 향상 가능)
- 초기 로드만 완료된다면 이후 렌더링이 빠르다.
- 서버에 요청할 것이 거의 없어서 서버 부담이 적다. (data가 필요할 때만 서버에 요청)
- Web Application에 좋다.
CSR의 단점
- 초기 렌더링 속도가 느리다.
- SEO(Server Engine Operation)에 좋지 않다. (초기 HTML 파일이 비어있기 때문에 봇이 데이터 수집을 하기가 어렵다)
- 초기 로드가 오래 걸린다.
- 외부 라이브러리가 필요한 경우가 많다.
위의 사진처럼 id="root"에 html을 연결해 JS 부분을 렌더링을 시키게 되면 React 어플리케이션의 UI가 사용자에게 보여지는 구조이다.
SSR(Server Side Rendering)
SSR은 서버에 페이지에 대한 요청을 하고 서버로부터 HTML, JS, CSS 파일 및 데이터를 전달받아 렌더링하는 방식이다. (서버에서 렌더링을 수행하는 방식)
1. 사용자가 접속한다.
2. 서버에서 React를 동작시킨다.
3. 서버에서 html 코드를 만들어서 이미 완성된 <html>과 <script>를 클라이언트로 보낸다.
4.그럼 클라이언트에서는 완성된 <html>에 <script>를 연결시켜주면 끝이난다.
위의 SSR 과정에 대한 더 세부적인 설명
1. User가 Website 요청을 보냄.
2. Server는 'Ready to Render'. 즉, 즉시 렌더링 가능한 html파일을 만든다.
(리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다.)
3. 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어있기 때문에 HTML은 즉시 렌더링 된다. 그러나 사이트 자체는 조작 불가능하다. (Javascript가 읽히기 전이다.)
4. 클라이언트가 자바스크립트를 다운받는다.
5. 다운 받아지고 있는 사이에 유저는 컨텐츠는 볼 수 있지만 사이트를 조작 할 수는 없다. 이때의 사용자 조작을 기억하고 있는다.
6. 브라우저가 Javascript 프레임워크를 실행한다.
7. JS까지 성공적으로 컴파일 되었기 때문에 기억하고 있던 사용자 조작이 실행되고 이제 웹 페이지는 상호작용 가능해진다.
이런 SSR 방식을 사용하면 검색 엔진들이 이미 서버쪽에서 만들어진 html을 크롤링 할 수 있기 때문에 검색에 유리해진다. (검색엔진최적화 : SEO)
SSR의 장점
- 초기 렌더링 속도가 빠르다.
- JS를 이용한 렌더링이 아니므로 SEO에 좋다. (HTML 파일에 모든 콘텐츠 정보가 포함되어 제공되기 때문에 봇이 데이터 수집이 가능하다)
- 초기 로딩 속도가 빠르다.
- Static Sites(동적)에 좋다.
SSR의 단점
- 서버에서 전체 앱을 미리 렌더링하기 때문에 컴포넌트 로딩이 오래 걸리면 유저는 빈 화면을 볼 수도 있다.
- 간단한 데이터 수정에도 서버에 매번 요청하기 때문에 서버 부하가 크다. (view 변경 시 요청)
- 매번 페이지를 요청할 때마다 새로고침되어 UX가 다소 떨어진다.
CSR vs SSR
CRA(create-react-app)으로 만든 React 앱은 CSR(Client-Side-Rendering)이고,
CNA(create-next-app)으로 만든 Next 앱은 SSR(Server-side-Rendering)이다.
CSR과 SSR은 유저가 브라우저에서 보는 화면인 UI를 어디서 만들어 주는지에 따라 구분한다.
CSR은 클라이언트(프론트)에서, SSR은 서버(백)에서 화면을 구성한다.
전통적인 웹 페이지 방식이 주로 SSR 방식을 사용한 것이고, SPA가 주로 CSR 방식을 사용하는 것이다.
- 웹 페이지 로딩 시간
웹 페이지 로딩의 종류는 첫 페이지를 로딩하는 것과, 나머지를 로딩하는 것으로 나뉘어진다.
1) 첫 페이지 로딩
ㄴ CSR의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러온다. 반면 SSR은 필요한 부분의 HTML과 스크립트만 불러오게 된다. 그래서 평균적으로 SSR이 더 빠르다.
2) 나머지 페이지 로딩
ㄴ 첫 페이지를 로딩한 후, 사이트의 다른 곳으로 이동하는 식의 동작을 가정할 때 CSR은 이미 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다. 반면 SSR은 첫 페이지를 로딩한 과정을 정확하게 다시 실행한다. 그래서 더 느리다.
SEO(Search Engine Optimization)
- 웹 사이트와 웹 페이지를 검색엔진이 쉽게 발견하고, 읽어가서 색인하고 상위 노출시켜 자연 유입되는 트래픽의 양과 질을 높일 수 있도록 관련 검색 알고리즘의 특성을 고려해서 웹 사이트의 구조나 콘텐츠를 개선하는 일련의 작업을 말한다.
- 운영중인 웹 사이트를 통해 유입을 기대하는 보다 많은 키워드의 검색 결과 페이지에서 기업이 제공하는 웹 콘텐츠가 보다 높은 순위로 노출되어 결과적으로 보다 많은 트래픽을 유도할 수 있도록 콘텐츠 작성과 웹 사이트 구축에서 지켜야하는 일정한 가이드라인
- 대부분의 웹 크롤러, 봇들은 JS를 실행시키지 못하고 HTML에서만 컨텐츠를 수집하기 때문에 CSR 방식으로 개발된 페이지를 빈페이지로 인식하게 된다.
- SSR 방식은 View를 서버에서 전부 렌더링하기 때문에 HTML에 모든 컨텐츠가 저장되어 있어 SEO를 사용하는데 문제가 없다.
레퍼런스
CSR 과 SSR의 차이 그리고 SEO
React나 Vue, Angular 같이 SPA 방식으로 개발하는 경우 여러가지 장점이 많지만 , SEO가 잘 되지 않는다는 단점이 있다. 그렇기 때문에 사용자들에게 정보제공을 하고 유입을 증가시켜야 하는 경우 SPA
velog.io
SPA, CSR과 SSR, SEO
최초 한번 페이지를 로딩한 이후 JS를 이용해 동적으로 데이터만 변경하여 화면의 컨텐츠를 바꾸는 방식의 웹 어플레케이션이다.웹에서 제공하는 정보량이 많아지고 데스크탑보다 성능이 떨어
velog.io
검색엔진최적화는 무엇인가? - 어센트 코리아
검색엔진최적화 검색엔진최적화(SEO로도 불림)는 웹사이트와 웹페이지를 검색엔진이 쉽게 발견(디스커버리)하고, 읽어가서(크롤링), 색인하고(인덱싱), 상위 노출(랭킹)시켜 자연 유입되는 트래
www.ascentkorea.com
검색엔진최적화(SEO)
운영 중인 웹사이트를 통해 유입을 기대하는 보다 많은 키워드의 검색 결과 페이지에서 기업이 제공하는 웹콘텐츠가 보다 높은 순위로 노출되어 결과적으로 보다 많은 트래픽을 유도할 수 있도
velog.io
댓글