Browser Rendering

개념

• 브라우저 렌더링이란 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(VIEW)에 표시해주는 작업을 말한다.
  즉 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달 받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 구성한다.
• 브라우저 렌더링은 크게 클라이언트 사이드 렌더링 방식과 서버 사이드 렌더링 방식으로 나눌 수 있다.

📌 검색 엔진 최적화 (SEO)

• 검색 엔진 결과 페이지에서 웹 사이트 또는 웹 페이지의 상위 노출도를 높이는 작업을 의미한다. 구글, 네이버 등 각 브라우저의 검색 엔진의 특성에 따라 차이가 발생 할 수 있다.
• 메타 태그를 적절히 설정 하는것으로 효율을 높힐 수 있다.
• <title> <description> <robots> <canonical> 
• 오픈 그래프(Open Graph) 태그를 적절히 설정하는것으로 효율을 높힐 수 있다.

👀 클라이언트 사이드 렌더링(Client Side Rendering)

• 클라이언트 사이드 렌더링은 클라이언트인 브라우저가 렌더링을 처리하는 방식으로 서버에서 받은 데이터를 통해 클라이언트 브라우저가 화면(View)를 그리는 주체가 된다.

 

• 장점
• 네이티브 앱과 비슷한 빠른 인터렉션을 구현 할 수 있다.
• View 렌더링을 브라우저가 담당하므로 서버 트래픽을 감소 시키고 사용자에게 더 빠른 인터렉션을 제공해준다.
• 새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험을 할 수 있다.

 

• 단점
• 첫 페이지 로딩 속도가 서버 사이드 렌더링에 비해 느리다.
• 서버에 첫 요청 시 전체 페이지에 대한 모든 문서 파일을 받기 때문에 서버 사이드 렌더링보다 로딩 속도가 느리다.
• 검색 엔진 최적화(SEO)에 대한 추가 보완 작업이 필요하다.
• 포털 사이트 검색 엔진 크롤러가 웹 사이트에 대한 데이터를 제대로 수집하지 못 하는 경우가 발생 할 수 있다.

————————————————————————————————————

👻 서버 사이드 렌더링(Server Side Rendering)

• 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에 처리하는 방식으로 클라이언트에서 요청이 들어올때마다 서버에서 새로운 화면(VIEW)를 만들어 제공한다. 즉, 서버가 화면을 그리는 주체가 된다.

 

• 장점
• 첫 페이지 로딩 속도가 클라이언트 사이드 렌더링에 비해 더 빠르다.
• 요청에 해당하는 문서만 브라우저에게 전달하기 때문에 초기 로딩 속도가 CRR에 비해 더 빠르다.
• 검색 엔진 최적화(SEO)가 가능하다.

 

• 단점
• 초기 로딩 이후 페이지 이동시 속도가 다소 느리다.
• 페이지 이동마다 클라이언트가 서버에 데이터를 요청하고 서버는 응답하는 방식이기 때문에 속도가 다소 느리다.

#Brower #Rendering #ServerSideRendering #ClientSideRendering

 

---