1. 브라우저 랜더링.
1주차 강의를 들으면서 CSR, SSR에 대해서 배웠다. 이 2개념을 잘 이용하면 SPA(Single Page Application-하나의 html에서 모든 것을 완성 반대말은 MPA-)와 구글과 네이버 같은 곳에서 검색엔진이 효율적이고 더 빨리 검색할 수 있다고 한다.
만약 쇼핑몰이나, 광고사이트 등 잠재적 사용자에게 자주 노출이 필요한 사이트들이 CSR과 SSR을 이용해서 좀 더 검색엔진에서 훨씬 효율적으로 사용자들에게 보여지고 있다는 것을 알게 되었다.
공부하다보니 브라우저가 어떻게 랜더링하는지 궁금하기도 하고 이 랜더링을 통해서 어떻게 SPA,MPA가 좀더 효율적으로 구동될 수 있는지 궁금했다.
브라우저의 환경에 따라 검색엔진에서 노출 빈도가 달라진다는 것은 생각하지도 못했다.
브라우저의 구성 요소
참고: https://all-young.tistory.com/22
User Interface - 사용자가 접근할 수 있는 영역이다.
- 예를 들어, 검색창, 뒤로가기/앞으로가기 버튼, 새로 고침 버튼 등 브라우저 프로그램 자체의 GUI를 구성하는 부분이다.
Browser Engine - User Interface와 Rendering Engine 사이의 동작을 제어해주는 엔진이다.
- 브라우저라는 프로그램의 비즈니스 로직, 핵심 중추 부분이다.
- Data Storage를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 한다.
Rendering Engine - 요청한 콘텐츠를 화면에 출력하는 역할이다.
-
HTML, CSS 등을 파싱하여 최종적으로 화면에 그린다.
이러한 구조로 브라우저에서 랜더링이 된다.
따라서 랜더링이 구조가 효율적이면 사용자도 유익하며 검색엔진도 쉽게 페이지를 검색할 수 있는 것이다.
2.SSR
SSR(Server Side Rendering)은 주로 Multi page application에서 사용한다.
-
서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식이다.
-
따라서 다른 페이지로 이동하기 위해서 서버에 있는 각 html파일을 요청해야 하며 따라서 거의 비슷한 html파일이라도 다른페이지이며 따라서 브라우저 구성요소와 같이 순서대로 처음 부터 다시 그린다. 즉, css, js가 똑같은 부분이더라도 다시 그려서(다른 html이니까) 브라우저가 위의 그림과 같이 랜더링을 하는 것이다.
-
당연하게도 검색엔진에는 상위에 위치할 수 있다. 웹사이트의 범위가 넗으니까
-
데이터 수집이 가능
SEO 참고 : https://developer.mozilla.org/ko/docs/Glossary/SEO
웹사이트,웹페이지란.. : https://developer.mozilla.org/ko/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines
- 빠른 초기 로딩이 가능하다.
- 매번 페이지를 요청할 때마다 새로 고침된다.
- 서버에 부담이 많이 갈 수 밖에 없다. 브라우저도 마찬가지이다.
2.CSR
CSR(Client Side Rendering)은 SPA에서 주로 사용한다.
- 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식이다.
csr의 과정
-클라이언트에서 초기화면을 로드하기 위해 서버에 요청을 보낸다.
-서버 는 화면에 표시하는 데 필요한 완전한 리소스의 응답한다.
-클라이언트 사이드 렌더링이 방식은 서버사이드 렌더링인 방식과 다르게 화면이 깜빡이지 않고 바로 수정된 데이터가 표시된다.
-빠른 속도와 서버 부하 감소
-클라이언트 사이드 렌더링 방식 은 변경된 부분과 관련된 데이터만 가져오므로 서버사이드 랜더링 보다 빠른 속도를 낼 수있다.
-
하지만 앞에서 언급한 seo는 불리하다는 단점있고 CSR을 채택한 싱글 페이지 어플리케이션은 자바스크립트를 사용하여 사용자와 상호 작용 후에 페이지 내용을 로드하기 때문에, 웹 크롤러 가 페이지를 색인화 하려고 하면 내용의 빈 페이지처럼 보이게 된다.
-
데이터 수집 불가능.
