Written by angular-style
on 2021-01-05

SSR & CSR

UI/UX와 렌더링의 기본 개념과 렌더링 동작 과정에 대해 이해

로그인 인증 실패 시 이메일(ID)이 틀렸는지, 비밀번호가 틀렸는지 구분해서 알려주는 것

정해진 형식에 어긋나면 실시간으로 형식에 어긋난 입력임을 나타내 주는 것

id작성 후 엔터키를 누르면 비밀번호 입력태그로 넘어가는 것

하여 더 편하고 효율적인 방향으로 프로세스가 동작할 수 있도록 만드는 것을 의미

폰트, 색깔, 줄간격 등의 디자인 요소가 포함됨

성능 악화 가능성 (서버 쪽에서 렌더링을 진행하면 그만큼 서버 자원이 많이 사용되기 때문에 불필요한 트래픽 낭비 발생)

프로젝트 복잡도 (라우터 사용하다보면 복잡도 높아질 수 있음)

초기로딩 성능 개선 (첫 렌더링된 HTML을 클라이언트에서 전달해주기 때문에 초기 로딩 속도를 많이 줄여줌)

검색엔진 최적화 (url마다 고유의 렌더링이 완료된 페이지를 가지고 있기 때문에, 크롤러가 접근했을 때 읽어들일 수 있음)

html을 서버 쪽에서 렌더링하기 때문에 초기 로딩 속도는 짧지만,

html을 서버 쪽에서 렌더링하기 때문에 초기 로딩 속도는 짧지만, 매번 페이지 전환 시 새로고침이 필요

SSR의 경우, 매번 페이지 전환 시 새로고침 이 필요하기 때문에 불필요한 데이터까지 한번에 가져오는 데이터 트래픽 이 발생할 수 있다. 하지만, 서버에서 html을 렌더링하여 띄워주기 때문에 초기 로딩 속도가 빠르고 , url마다 고유의 렌더링이 완료된 페이지를 가지고 있기에 검색엔진 크롤러가 접근했을 때 읽어들일 수 있어 검색엔진 최적화에 알맞은 렌더링 방식이다.

하지만 SPA는 정보 제공을 위한 웹페이지 보다는 애플리케이션에 적합한 기술이며, Angular나 React와 같은 CSR 지원 프레임워크는 서버 렌더링을 지원하는 SEO 대응 기술이 이미 존재하고 있어 큰 단점은 아님!

Ajax 요청에 의해 서버로부터 데이터를 응답받아 화면을 생성하는 경우, 브라우저의 주소창 url은 변경되지 않음 => 이는 사용자의 방문 history를 관리할 수 없음을 의미하며, SEO 이슈 발생 원인이기도 함(history 관리를 위해서는 각 페이지가 브라우저의 주소창에서 구별할 수 있는 유일한 url을 소유하여야 함)

구글 검색엔진은 자바스크립트 엔진이 내장되어 있지만, 네이버나 다음 등 검색엔진은 크롤링에 어려움이 있어 SSR을 따로 구현해야 하는 번거로움 존재

SEO, 검색 엔진 크롤러가 데이터 수집이 어려움 => ex. 크롬에서 리액트로 만든 웹앱 소스를 확인하면 내용이 비어있음

높은 UX (새로고침이 발생하지 않으므로 네이티브 앱과 같은 사용자 경험을 제공할 수 있음)

서버 측 트래픽 감소 (비동기 통신으로 그때그때 필요한 데이터만 전송함)

서버로부터 비어있는 html, js, css 등 필요한 파일들을 다운로드 받고,

from http://ziyuun.tistory.com/18 by ccl(A) rewrite - 2021-01-05 16:26:01

Top