SPA ( Single Page Application )
= 하나의 페이지로 이루어진 홈페이지
= CSR(react)에 적합하지만 정적인 페이지(Java, php) 하나로 구성되면 그것도 SPA라고 부른다.
= Data 수정이나 조회 시 동적으로 페이지를 구성하여 페이지 새로고침이나 페이지 이동은 없다.
= 웹에서 제공하는 정보량이 많아지고 데스크톱보다 성능이 떨어지는 모바일을 위해 등장했다.
MPA ( Multiple Page Application )
= 여러 개의 페이지로 구성된 홈페이지
= SSR에서 사용한다.
CSR ( Client Side Rendering )
= 초기로드시 빈 HTML과 모든 로직이 담긴 JS를 로드한다.
= 빈 HTML에 Js를 이용하여 DOM을 동적으로 그려낸다.
장점
-> 동적으로 Dom을 그리기에 원하는 부분만 업데이트가 가능하다.
=> 페이지간의 이동 속도가 빠르다.
=> 서버로 전송되는 데이터 양이 최소화된다.
=> 새로고침이 발생하지않아 네이티브 앱과 유사한 사용자 경험을 제공한다.
ex) 헤더나 푸터의 경우( 변경이 없는 content )는 고정시켜놓고 변화가 필요한 콘텐츠만 변경한다.
단점
-> 초기로드 시 모든 로직이 담긴 js를 로드하기에 시간이 오래 걸린다.
-> SEO이 SSR에 비해 취약하다.
SSR ( Server Side Rendering )
= 서버에서 렌더링하여 완성된 HTML 파일을 로드한다.
장점
-> SSR의 경우 CSR보다 초기 진입 시 로드 시간이 짧다.
-> 개별 페이지를 넘겨받아 각 페이지에 대한 정보 입력이 쉽다.
-> SEO 향상시킨다.
단점
-> 링크이동 시 HTML파일을 새로 서버에서 받아오기에 깜빡임 현상이 발생한다.
-> 서버에서 HTML을 그려 로드하기때문 페이지 이동은 CSR에 비해 느리다.
-> 이로 인해 불 필요한 부분까지 새로 로드해야하고 이는 곧 서버 부하라는 문제를 일으킬 수 있다.
-> 완성된 HTML을 Js보다 먼저 받아와 화면상에서 HTML을 확인할 수 있지만
Js 다운이 늦어지면서 기능 동작이 안될 수 있다.
SEO
= 검색 엔진 최적화는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 것으로 검색 랭크 개선이라고도 부른다.
= CSR의 경우 SEO에 취약한 편인데 이러한 점을 보완하여 CSR인 react를 next.js를 이용해 서버사이드 렌더링을 한다.
이렇게 되면 검색 엔진들이 이미 서버에서 만들어진 html을 크롤링할 수 있어 검색에 유리해진다.
추가 ++
SSR에 비해 CSR이 취약한 편인 것이지 안 되는 것은 아니다.
흔히 많이들 하는 오해가 CSR은 SEO가 잘 안 된다 생각하는데
이는 많은 크롤러들을 Js를 지원하지 않아서 생긴 오해이다.
구글 봇의 경우 Js를 지원하기에 CSR도 SEO가 잘 되며 ES2015 이상의 최신 js도 지원한다.
또한 Full SSR 없이도 메타 태그들을 잘 활용하면 SEO를 잘 지원할 수 있다.
네이버의 경우에도 js기술이 발전됨에 따라 SPA로 전환되는 트렌드를 고려하여
SPA기반으로 제작된 사이트의 수집 및 색인을 지원하고 있다고 한다.
SPA의 경우 js가 웹 페이지의 구조 결정에 주도적인 역할을 하기에
네이버 검색로봇도 수집 및 콘텐츠 해석과정에서 js의 영향도를 측정하고 해석하지만
이러한 과정은 전통적인 HTML 페이지 해석보다 몇 배이상의 리스소가 필요해
SPA사이트라도 HTML의 주요 영역 생성은 검색로봇이 잘 인식할 수 있도록 SSR를 권장하고 있다.
[ 참고문헌 ]
https://minsoftk.tistory.com/68
댓글